CSS Single Div Drawing - 形状

Question

我正在尝试使用CSS渐变和单个div绘制.

不幸的是,没有足够的信息,所以我需要通过阅读其他人的代码来自己学习.这里有些例子:

https://codepen.io/PButcher/pen/JMRKpG

https://codepen.io/jkantner/pen/zdeJYg

https://codepen.io/jkantner/pen/ppjRBP

https://codepen.io/jkantner/pen/XMLVXa

到目前为止,我已经学会了如何只创建几个基本形状:

div
{
    height: 20em;
    width: 20em;
    
    background:
        linear-gradient( 0deg, #000 0%, #000 100% ) 1em 1em / 5em 5em,
        radial-gradient( circle at center, #000 70%, transparent 70% ) 1em 7em / 5em 5em,
        linear-gradient( 45deg, #000 0%, #000 50%, transparent 50% ) 1em 13em / 5em 5em,
        linear-gradient( -45deg, #000 0%, #000 50%, transparent 50% ) 7em 1em / 5em 5em,
        linear-gradient( 135deg, #000 0%, #000 50%, transparent 50% ) 7em 7em / 5em 5em,
        linear-gradient( -135deg, #000 0%, #000 50%, transparent 50% ) 7em 13em / 5em 5em,
        radial-gradient( 100% 100% at top, #000 50%, transparent 50% ) 14em 1em / 5em 5em,
        radial-gradient( 100% 100% at bottom, #000 50%, transparent 50% ) 14em 2em / 5em 5em,
        linear-gradient( 45deg, #000 0%, #000 50%, transparent 50% ) 14em 7em / 4em 7em,
        radial-gradient( 100% 50%, #000 0%, #000 50%, transparent 50% ) 14em 14em / 5em 5em;

    background-repeat: no-repeat;
}

<div></div>

但是,我想创造更复杂的形状,例如,这只鹰的喙和羽毛,或它上面的阴影.

可以使用CSS和单个div实现吗？

Answer 1

正如我上面评论的，我们可以使用多种技术来实现这样的目标：

1. 带有圆形或椭圆形的径向渐变，并通过调整大小和位置

.elem {
 width:300px;
  height:200px;
  border:1px solid;
  background:
       radial-gradient(ellipse at center, red 15%,transparent 15%),
       radial-gradient(circle at 40px 120px, #ffc20f 20%,transparent 20%),
       radial-gradient(circle at right bottom, #000 25%,transparent 25%);
}

<div class="elem"></div>

2. 我们可以旋转和调整大小和位置的线性渐变：

.elem {
  width:300px;
  height:200px;
  border:1px solid;
  background:
       linear-gradient(20deg,transparent 20%,#ffc20f 20%,#ffc20f 30%,transparent 30%) no-repeat 98px -50px / 51px 151px,
       linear-gradient(-20deg,transparent 20%,#ffc20f 20%,#ffc20f 30%,transparent 30%) no-repeat 98px -50px /51px 151px,
       linear-gradient(30deg,red 20%,transparent 20%) no-repeat 10px 30px / 50px 50px,
       linear-gradient(to right,blue 20%,transparent 20%) no-repeat 70px 20px / 50px 60px,
       linear-gradient(40deg,#000 20%,transparent 20%) no-repeat 200px 20px / 15px 100px,
       linear-gradient(-40deg,#000 20%,transparent 20%) no-repeat 200px 20px / 15px 100px;
              

}

<div class="elem" ></div>

3. 还有剪辑路径可以帮助您剪切元素并调整全局形状。这也将允许您将元素放置在任何背景之上。（但目前还不是所有浏览器都支持该功能）：

body {
  background: #f2f2f5;
}

.elem {
  background: #000;
  width: 300px;
  height: 200px;
  -webkit-clip-path: polygon(3% 39%, 13% 21%, 26% 13%, 47% 14%, 69% 21%, 83% 25%, 90% 33%, 72% 37%, 87% 45%, 62% 49%, 87% 58%, 72% 61%, 58% 62%, 42% 62%, 29% 59%, 17% 64%, 18% 50%, 21% 42%, 10% 48%, 5% 59%);
  clip-path: polygon(3% 39%, 13% 21%, 26% 13%, 47% 14%, 69% 21%, 83% 25%, 90% 33%, 72% 37%, 87% 45%, 62% 49%, 87% 58%, 72% 61%, 58% 62%, 42% 62%, 29% 59%, 17% 64%, 18% 50%, 21% 42%, 10% 48%, 5% 59%);
}

<div class="elem"></div>

4. 您还可以使用伪元素，它允许您添加最多 2 个新元素，您可以在这些元素上应用上面的 3 种技术以及其他 CSS 属性，如 box-shadow、opacity、filter、transform 等。这将允许您更容易分割形状。

然后主要技巧是将它们相互叠加使用以获得最终的形状。

这是一个丑陋的开始，表明如果您能够将设计切割成不同的部分并计算不同的尺寸/位置，这是可能的：

body {
  background: red;
}

.eagle {
  width: 300px;
  height: 200px;
  position: relative;
  background: radial-gradient(circle at 100px 70px, #000 2.5%, transparent 2.5%), linear-gradient(10deg, transparent 20%, #000 20%, #000 29%, transparent 30%) no-repeat 98px -8px / 142px 86px, linear-gradient(6deg, transparent 20%, #ffc20f 20%, #ffc20f 35%, transparent 35%) no-repeat 98px -50px / 141px 168px, radial-gradient(circle at 150px 100px, #000 15%, transparent 15%), radial-gradient(circle at 110px 130px, #000 15%, transparent 15%), radial-gradient(circle at 100px 100px, #ffc20f 20%, transparent 20%), radial-gradient(circle at 100px 100px, #000 25%, transparent 25%), #ffffff;
  clip-path: polygon(18% 35%, 23% 27%, 43% 14%, 64% 10%, 81% 27%, 79% 41%, 62% 66%, 48% 74%, 63% 49%, 46% 47%, 43% 53%, 33% 53%, 34% 52%, 29% 64%, 31% 77%, 20% 69%, 20% 69%, 17% 62%, 15% 52%, 16% 41%);
  ;
}

.eagle:before {
  content: "";
  position: absolute;
  top: 17%;
  left: 60%;
  height: 22px;
  width: 30px;
  border-radius: 50%;
  background-image: radial-gradient(circle at center, #000 29%, #ffc20f 20%);
}

.eagle:after {
  content: "";
  position: absolute;
  top: 36%;
  left: 58%;
  height: 84px;
  width: 27px;
  transform: rotate(45deg) skewY(-61deg);
  background-image: linear-gradient(to right, #000 29%, #ffc20f 20%, #ffc20f 80%, #000 80%);
}

<div class="eagle"></div>