圣诞树动画

Question

sergey - dev

Asked:2020-06-07 16:21:09 +0000 UTC2020-06-07 16:21:09 +0000 UTC 2020-06-07 16:21:09 +0000 UTC

使用 css 进行抠图

772

我试图div在一个干净的字母上剪下字母CSS，我使用 - clip-path，但我不能完全剪掉它。

body {
  background: #262626;
}

.education-feedback {
  padding: 100px 0;
  background-image: url('../img/back-bot.jpeg');
  background-size: cover;
  background-position: 10%;
  position: relative;
}

.line-trans {
  position: absolute;
  height: 20px;
  left: 5%;
  top: 3px;
  transform: rotate(-47deg);
}

.line-trans img {
  width: 316px;
  height: 17px;
}

.form_feedback {
  width: 500px;
  background-color: #fff;
  margin: 100px auto;
  text-align: center;
  padding: 50px 0;
  clip-path: polygon(21% 31%, 10% 5%, 0 40%, 0 100%, 20% 100%, 48% 100%, 100% 100%, 100% 80%, 100% 42%, 100% 0, 80% 0%, 31% 0);
}

.form_feedback input {
  display: block;
  margin: 50px auto;
  height: 50px;
  width: 300px;
  border: 1px solid #059805;
  padding: 0 20px;
}

.form_feedback .btn-order {
  background: linear-gradient(45deg, #059805 33%, #4dbd4d 66%, #1db11d);
  color: #fff;
  border: navajowhite;
  padding: 15px 80px;
  text-transform: uppercase;
  font-weight: 600;
}

.name_feddback {
  position: relative;
}

.name_feddback img {
  position: absolute;
  right: 22%;
  bottom: 6px;
}

.phone_feedback {
  position: relative;
}

.phone_feedback img {
  position: absolute;
  right: 22%;
  bottom: 6px;
}

.email_feedback {
  position: relative;
}

.email_feedback img {
  position: absolute;
  right: 22%;
  bottom: 12px;
}

<div class="education-feedback">
  <div class="line-trans"><img src="img/line.png"></div>
  <div class="form_feedback">
    <div class="name_feddback">
      <input type="" name="" placeholder="Имя">
    </div>

    <div class="phone_feedback">
      <input type="" name="" placeholder="Телефон">
    </div>

    <div class="email_feedback">
      <input type="" name="" placeholder="E-mail">
    </div>
    <p><button class="btn-order">Заказать курс</button></p>
  </div>
</div>

镂空字母 N 和 M -

2 个回答

Voted

Arthur · Answer 1 · 2020-06-25T20:21:42Z

伪元素来拯救！

body {
  background: url("https://images.unsplash.com/photo-1529926279675-c72f1da4eb2a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=86eceef4b033a911a312516dc81ccc58&auto=format&fit=crop&w=1041&q=80");
  background-size: cover;
}

.line-trans {
  position: absolute;
  height: 20px;
  left: 5%;
  top: 3px;
  transform: rotate(-47deg);
}

.line-trans img {
  width: 316px;
  height: 17px;
}

.education-feedback {
  padding: 10px 0;
  position: relative;
}

.form_feedback {
  position: relative;
  width: 500px;
  height: 300px;
  background-color: #fff;
  margin: 100px auto;
  text-align: center;
  padding: 0 0 30px 0;
}

.form_feedback::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  border-left: 26px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 50px solid white;
}

.form_feedback::after {
  content: "";
  position: absolute;
  top: -80px;
  left: 0;
  border-left: 26px solid white;
  border-bottom: 50px solid transparent;
}

.angle:first-child {
  position: absolute;
  top: -80px;
  right: 0;
  background-color: white;
  width: calc(100% - 85px);
  height: 80px;
}

.angle:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: -15px;
  background-color: white;
  width: 30px;
  height: inherit;
  transform: skew(-20deg);
}

.angle:first-child::after {
  content: "";
  position: absolute;
  left: -60px;
  border-left: 26px solid transparent;
  border-right: 20px solid transparent;
  border-top: 50px solid white;
  height: inherit;
}

.angle:last-child {
  position: absolute;
  bottom: -80px;
  left: 0;
  background-color: white;
  width: calc(100% - 85px);
  height: 80px;
}

.angle:last-child::before {
  content: "";
  position: absolute;
  top: 0;
  right: -15px;
  background-color: white;
  width: 30px;
  height: inherit;
  transform: skew(-20deg);
}

.angle:last-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: -70px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 45px solid white;
}

.triangle {
  position: absolute;
  top: 0;
  right: -85px;
  border-right: 13px solid white;
  border-bottom: 40px solid transparent;
}

.triangle::before,
.triangle::after {
  content: "";
  position: absolute;
}

.triangle::before {
  top: 30px;
  left: -14px;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 30px solid white;
}

.triangle::after {
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-bottom: 50px solid white;
  top: 30px;
  left: -59px;
}

.add {
  position: absolute;
  top: 60px;
  right: -84px;
  width: 20px;
  height: 20px;
  background-color: white;
}

.add::before {
  content: "";
  position: absolute;
  left: -10px;
  background-color: inherit;
  width: inherit;
  height: inherit;
  transform: skew(-23deg);
}

.add::after {
  content: "";
  position: absolute;
  left: -28px;
  bottom: 0;
  background-color: inherit;
  width: inherit;
  height: 6px;
}

.form_feedback input {
  display: block;
  margin: 50px auto;
  height: 50px;
  width: 300px;
  border: 1px solid #059805;
  padding: 0 20px;
}

.form_feedback .btn-order {
  background: linear-gradient(45deg, #059805 33%, #4dbd4d 66%, #1db11d);
  color: #fff;
  border: navajowhite;
  padding: 15px 80px;
  text-transform: uppercase;
  font-weight: 600;
}

.form_feedback input {
  display: block;
  margin: 50px auto;
  height: 50px;
  width: 300px;
  border: 1px solid #059805;
  padding: 0 20px;
}

.form_feedback .btn-order {
  position: relative;
  background: linear-gradient(45deg, #059805 33%, #4dbd4d 66%, #1db11d);
  color: #fff;
  border: navajowhite;
  padding: 15px 80px;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 1;
}

.name_feddback {
  position: relative;
}

.name_feddback img {
  position: absolute;
  right: 22%;
  bottom: 6px;
}

.phone_feedback {
  position: relative;
}

.phone_feedback img {
  position: absolute;
  right: 22%;
  bottom: 6px;
}

.email_feedback {
  position: relative;
}

.email_feedback img {
  position: absolute;
  right: 22%;
  bottom: 12px;
}

<div class="education-feedback">
  <div class="line-trans"><img src="img/line.png"></div>
  <div class="form_feedback">
    <div class="angle"></div>
    <div class="name_feedback">
      <input type="" name="" placeholder="Имя">
    </div>

    <div class="phone_feedback">
      <input type="" name="" placeholder="Телефон">
    </div>

    <div class="email_feedback">
      <input type="" name="" placeholder="E-mail">
    </div>
    <p><button class="btn-order">Заказать курс</button></p>
    <div class="angle">
      <div class="triangle"></div>
      <div class="add"></div>
    </div>
  </div>
</div>

Qwertiy · Answer 2 · 2020-06-26T06:14:51Z

clip-path可以与calc. 您只需要将所有值设置为固定的（即，不是百分比），但对于底部边缘，使用calc从 100% 中减去它们。

W左上角的信：

clip-path: polygon(1em 1em, 2.5em 1em, 3.5em 4em, 4.5em 1em, 5.5em 1em, 6.5em 4em, 7.5em 1em, 9em 1em, 7em 7em, 6em 7em, 5em 4em, 4em 7em, 3em 7em, 1em 1em);

M右下角的字母是通过稍微变换得到的

console.log(
  "1em 1em, 2.5em 1em, 3.5em 4em, 4.5em 1em, 5.5em 1em, 6.5em 4em, 7.5em 1em, 9em 1em, 7em 7em, 6em 7em, 5em 4em, 4em 7em, 3em 7em, 1em 1em"
  .replace(/([^ ,]+)(,?)/g, "calc(100% - $1)$2")
)

所有这些都被插入clip-path并由一个矩形和几个点补充：

body {
  background: linear-gradient(to bottom, blue, red);
}

div {
  padding: 1em 10em;
  background: black;
  color: white;
  text-align: justify;
  text-align-last: justify;

  clip-path: polygon(
    0 0,
    1em 1em, 2.5em 1em, 3.5em 4em, 4.5em 1em, 5.5em 1em, 6.5em 4em, 7.5em 1em, 9em 1em, 7em 7em, 6em 7em, 5em 4em, 4em 7em, 3em 7em, 1em 1em,
    0 0,
    calc(100% - 1em) calc(100% - 1em), calc(100% - 2.5em) calc(100% - 1em), calc(100% - 3.5em) calc(100% - 4em), calc(100% - 4.5em) calc(100% - 1em), calc(100% - 5.5em) calc(100% - 1em), calc(100% - 6.5em) calc(100% - 4em), calc(100% - 7.5em) calc(100% - 1em), calc(100% - 9em) calc(100% - 1em), calc(100% - 7em) calc(100% - 7em), calc(100% - 6em) calc(100% - 7em), calc(100% - 5em) calc(100% - 4em), calc(100% - 4em) calc(100% - 7em), calc(100% - 3em) calc(100% - 7em), calc(100% - 1em) calc(100% - 1em),
    0 0, 0 100%, 100% 100%, 100% 0, 0 0
  );
}

<div contenteditable>
Пытаюсь вырезать буквы в div на чистом CSS, использую — clip-path, но полностью вырезать не получается
Пытаюсь вырезать буквы в div на чистом CSS, использую — clip-path, но полностью вырезать не получается
Пытаюсь вырезать буквы в div на чистом CSS, использую — clip-path, но полностью вырезать не получается
</div>

使用 css 进行抠图

是否可以在 C++ 中继承类 <---> 结构？

这种神经网络架构适合文本分类吗？

为什么分配的工作方式不同？

控制台中的光标坐标

如何在 C++ 中删除类的实例？

点是否属于线段的问题

json结构错误

ServiceWorker 中的“获取”事件

c ++控制台应用程序exe文件[重复]

按多列从sql表中选择

使用 css 进行抠图

2 个回答

相关问题