Question

我正在制作这样形状的特殊盒子，我不知道怎么用css画这个

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

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

Answer 2

请看示例谈话泡泡：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; }

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

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

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

我怎么能用css做这样的div形状？

4 个答案: