How can i make div shape like this with css?

Question

i'm making special boxes with shape like this, i don't know how to draw this with css

score 5 · Accepted Answer · answered Oct 08 '16 at 15:09

You can first create rectangle with border-radius and add triangle with :after pseudo-element.

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

if you rotate the pseudo element, then you can draw a shadow around the bubble http://codepen.io/gc-nomade/pen/amGjqw — G-Cyrillus, Oct 11 '16 at 19:48

score 2 · Answer 2 · answered Oct 08 '16 at 15:05

Look here at the example Talk Bubble: https://css-tricks.com/examples/ShapesOfCSS/

and here'e the code:

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

score 2 · Answer 3 · answered Oct 09 '16 at 11:45

SVG
Creating a complex shape is easier to do with a SVG then 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>

score 0 · Answer 4 · answered Oct 08 '16 at 16:07

Impressed with the solution given by @Nenad Vracar

Here is another way of doing the same, may be helpful in understanding the CSS properties.

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

How can i make div shape like this with css?

4 Answers4