我怎样才能使这样的CSS形状与CSS？

我正在做特种箱用这样的造型，我不知道如何用CSS在这里的例子说话泡泡得出这样的

2016-10-08 I.Jokhadze

您可以先用border-radius创建矩形，然后用:after添加三角形伪元素。

.shape { 
 
    width: 200px; 
 
    height: 50px; 
 
    background: #B67025; 
 
    margin: 50px; 
 
    border-radius: 25px; 
 
    position: relative; 
 
} 
 
.shape:after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    right: 0; 
 
    top: 50%; 
 
    border-width: 10px 0 10px 10px; 
 
    transform: translate(80%, -50%); 
 
    border-color: transparent transparent transparent #B67025; 
 
}

<div class="shape"></div>

来源

2016-10-08 15:09:14

，那么你就可以得出一个影子周围泡影http://codepen.io/gc-nomade/pen/amGjqw –

看：https://css-tricks.com/examples/ShapesOfCSS/

这里“E的代码：

#talkbubble { 
 
    width: 120px; 
 
    height: 80px; 
 
    background: red; 
 
    position: relative; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    margin: 50px 
 
} 
 

 
#talkbubble:before { 
 
    content:""; 
 
    position: absolute; 
 
    right: 100%; 
 
    top: 26px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 13px solid transparent; 
 
    border-right: 26px solid red; 
 
    border-bottom: 13px solid transparent; }

<div id="talkbubble"></div>

来源

2016-10-08 15:05:07 Arkej

外加与@Nenad Vracar区

这里给出的解决方案是做同样的另一种方式，在理解CSS属性可能会有所帮助。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <style> 
     .main-div { 
      position: relative; 
     } 

     .first { 
      width: 150px; 
      height: 50px; 
      background: #B67025; 
      border-radius: 25px 0 0 25px; 
      float: left; 
      position: absolute; 
      top: 0; 
     } 

     .second { 
      width: 50px; 
      height: 50px; 
      background: #B67025; 
      border-radius: 0 25px 25px 0; 
      float: left; 
      position: absolute; 
      left: 150px; 
     } 

     .third { 
      position: absolute; 
      left: 197px; 
      top: 15px; 
      width: 0; 
      height: 0; 
      border-top: 10px solid transparent; 
      border-bottom: 10px solid transparent; 
      border-left: 10px solid #B67025; 
     } 
    </style> 

</head> 
<body> 
    <div class="main-div"> 
     <div class="first"> 
     </div> 
     <div class="second"> 
     </div> 
     <div class="third"> 
     </div> 
    </div> 
</body> 
</html>

来源

2016-10-08 16:07:14

SVG
创建复杂的形状很容易用SVG做那么CSS：

svg { 
 
    /*For demonstration only*/ 
 
    border: 1px solid black; 
 
}

<svg width="300px" viewBox="0 0 200 100"> 
 
    <path d="m50,10 95,0 
 
      a40 40 0 0 1 40,30 
 
      l10,10 
 
      l-10,10 
 
      a40 40 0 0 1 -40,30 
 
      h-95 a1 1 0 0 1 0,-80z" fill="rgb(182, 112, 37)"/> 
 
</svg>

如果旋转伪元素

来源

2016-10-09 11:45:04 Persijn

我怎样才能使这样的CSS形状与CSS？

回答

相关问题