我怎樣才能使這樣的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？

回答

相關問題