我怎样才能用css制作这样的div形状？ [复制]答案

【问题标题】：How can i make div shape like this with css? [duplicate]我怎样才能用css制作这样的div形状？ [复制]
【发布时间】：2017-02-17 10:27:06
【问题描述】：

我正在制作这种形状的特殊盒子，我不知道如何用 css 绘制它

【问题讨论】：

标签： html css css-shapes

【解决方案1】：

你可以先用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;
}

&lt;div class="shape"&gt;&lt;/div&gt;

【讨论】：

如果你旋转伪元素，那么你可以在气泡周围画一个阴影codepen.io/gc-nomade/pen/amGjqw

【解决方案2】：

看这里的例子 Talk Bubble：https://css-tricks.com/examples/ShapesOfCSS/

这里是代码：

#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; }

&lt;div id="talkbubble"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

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>

【讨论】：

【解决方案4】：

对@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>

【讨论】：