如何在 CSS3 中使用伪类创建自定义形状

Question

我正在尝试使用 Bootstrap 创建一个看起来像这张图片的元素

这是我走了多远的屏幕截图

我从来没有研究过伪类，我发现很难得到准确的形状。请看看我的代码并帮助我弄清楚。我在这里只包含了第二个（屏幕截图右侧的那个）剪贴板的代码。

HTML

<div class="col-xs-12 col-sm-6">
     <div class="clip">
          <div class="circle"></div>
     </div>

     <div class="pad">          
          <div class="paper"></div>    
     </div>
</div>

CSS

.clip, .circle{
    position: relative;
}

.clip::after, .clip::before, circle:after, .circle:before{
  display: block;
  position: absolute;
  content: "";
  z-index: 50;
}

.clip:before{
    top: 12.5px;
    left: 15%;
    width: 70%;
    border-bottom: solid 50px grey;
    border-left: solid 150px transparent;
    border-right: solid 150px transparent;

}

.clip:after{
  top: 60px;
  left: 15%;
  width: 70%;
  border-bottom: solid 55px grey;

  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.circle:before{
    top: 10px;
    left: 70%;
    width: 20%;
    height: 50px;
    border-radius: 50%;
    border-right: solid 150px yellow; 
}

Answer 1

https://jsfiddle.net/ahe128/esmrLzuv/5/

我做了一些事情，但这真的很辛苦我会尝试完成这个:)

.clip,
.circle {
  position: relative;
}

.clip::after,
.clip::before,
circle:after,
.circle:before {
  display: block;
  position: absolute;
  content: "";
  z-index: 50;
}

.clip:before {
  top: 1rem;
  left: 10%;
  width: 20%;
  border-bottom: solid 50px grey;
  border-left: solid 150px transparent;
  border-right: solid 150px transparent;
}

.clip:after {
  top: 4.65rem;
  left: 10%;
  right:10%;
  width: 82%;
  border-bottom: solid 4.3rem grey;
  border-top-left-radius: 0.8rem;
  border-top-right-radius: 0.8rem;
  border-bottom-left-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
}

.circle:before {
  top: 0.78rem;
  height: 1px;
  width:1px;
  border-radius: 50%;
  border: solid 25px white;
  z-index:100;
  left:47%
}

Answer 2

终于.......我让它工作了（对角线渐变除外）。但它还没有反应。我的目标是保持每个剪贴板的设计完好无损，并在小屏幕中将它们一个接一个地堆叠起来。有人可以指出我遗漏的地方吗！

此外，如果在 Pure CSS 中有更好的方法，那么我很乐意看到它。

Fiddle: https://jsfiddle.net/chandannadig/esmrLzuv/7/

/*Clip*/
.clip, .circle{
    position: relative;
}

.clip::after, .clip::before, circle:after, .circle:before{
  display: block;
  position: absolute;
  content: "";
}

.clip:before{
    z-index: 50;
    top: 1rem;
    left: 6.958rem;
    width: 29rem;
    border-bottom: solid 4rem grey;
    border-left: solid 11.5rem transparent;
    border-right: solid 11.5rem transparent;

}

.clip:after{
  top: 4.7rem;
  left: 6.958rem;
  width: 29rem;
  z-index: 50;
  border-bottom: solid 4rem grey;

  border-top-left-radius: 0.8rem;
  border-top-right-radius: 0.8rem;

  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.circle{
    position: absolute;
    z-index: 60;
    top: 0.4rem;
    left: 15.6rem;
    width: 12rem;
    height: 8rem;
    background: grey;
    border-radius: 50%;
}

.circle::before{
    z-index: 60;
    top: 1rem;
    left: 4.2rem;
    width: 3.5rem;
    height: 3.5rem;
    background: white;
    border-radius: 50%;
}
/*End of Clip*/

Answer 3

因为没有 SVG 标签，我将使用伪渐变：

div {
  position:relative;
  float:left;
  margin:60px 60px 80px;
  width:180px;
  height:200px;
  border-radius:15px;
  background:white;
  box-shadow:/* draw inside part of border */0 0 0 20px #159E91, inset -1px -1px 1px;
}
div:before {/*to  draw outside part of  border with same radius inside/out */
  z-index:-1;
  border-radius:20px;
  content:'';
  border: 20px solid #159E91;
  position:absolute;
  top:-30px;
  left:-30px;
  right:-30px;
  bottom:-30px;
  box-shadow:0 -2px 2px rgba(30, 162, 149, 0.2), 0 0 2px white,  0 5px  5px -3px rgba(0,0,0,0.5)
}
div:after {/* draw gradient underneath clipper */
  content:'';
  position:absolute;
  top:0;
  border-radius: 0 15px 0 0;
  left:26px;
  width:152px;
  height:150px;
  background:
    linear-gradient(45deg, white 40%, rgba(255,255,255,0) 40% ),/* mask*/
    linear-gradient(-45deg, white  , transparent 70%),/* mask*/
    linear-gradient(to right   , rgba(0,0,0,0.25)  , rgba(0,0,0,0.15)),transparent ;
}
.clipper {/* hold clipper shape actually */
  display:block;
  width:128px;
  height:80px;
  margin: -52px auto 30px;
  position:relative;
  z-index:1;
  overflow:hidden;
}
.clipper b {/* show the clipper shape */
  border-radius:35px;
  position:absolute;
  height:150%;
  width:100%;
  box-shadow: 0 0 1px 1px gray;
  left:50%;
  top:-12px;
  transform-origin:0 0;
  transform:rotate(45deg);
  overflow:hidden;
  }
.clipper b:before {/* draw the hoe and paint around it */
  content:'';
  display:block;
  border-radius:100%;
  height:29px;
  width:29px;
  margin:20px;  
  box-shadow:inset -1px -1px   1px gray, 0 0 0 100px  #3B3B3B, inset 1px 1px 2px rgba(0,0,0,0.5);
}

/* to match fake picture's text */
.clipper ~ span {
  display:block;
  background:#353535;
  margin:10px 58px;
  padding:5px;
  position:relative;
  z-index:1;
}
.clipper ~ span:last-of-type {
  display:block;
  background:#353535;
  margin:10px 85px 10px 58px;
}

<div>
  <span class="clipper"><b></b></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

但对于一个形状来说，这真的很多 CSS，其中图像或 SVG 可以很好地进行设计。

你可以在这里玩：http://codepen.io/gc-nomade/pen/rLYYZx

如何在 CSS3 中使用伪类创建自定义形状

How to create custom shapes with pseudo classes in CSS3

css

pseudo-class

css-shapes

如何在 CSS3 中使用伪 类 创建自定义形状

How to create custom shapes with pseudo classes in CSS3

css

pseudo-class

css-shapes

如何在 CSS3 中使用伪类创建自定义形状