CSS 单张 Div 绘图 - 形状

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

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

radial-gradient 使用 circle 或 ellipse 并通过调整 size 和位置

.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>

Linear-gradient 我们可以 rotate 并调整 size 和 position：

.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>

还有所有浏览器的clip-path that can help you to cut your element and adjust the global shape. This will also allow you to have you element above any background. (but this feature is not yet supported）：

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>

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

那么主要的技巧就是在彼此之上使用它们以获得最终的形状。

这是一个丑陋的开始，表明如果您能够将设计切割成不同的部分并计算出不同的size/positions:

是可能的

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>

CSS 单张 Div 绘图 - 形状

CSS Single Div Drawing - Shapes

css

gradient

linear-gradients

radial-gradients