How to make this shape in css or through SVG? - html

Question

I am wondering if below black shape can be made through css, or we need to use SVG for it, please provide css if possible.
In above image, the shape of black div is quite tricky to be done through css, please suggest.

Answer 1

Yes, It can be done by svg, but going not so far, we can do that by css3 also.
div {
margin: 60px auto;
width: 200px;
height: 50px;
position: relative;
background-color: #555;
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
}
span {
display: block;
width: 200px;
height: 60px;
padding: 15px 0;
position: relative;
z-index: 1;
text-align: center;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
div::before {
content: "";
width: 100%;
height: 20px;
position: absolute;
background-color: #555;
transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
top: -6px;
}
<div>
<span>Phone Number</span>
</div>

Answer 2

Here's a rough sketch .
You can do it with help of :before and :after pseudo elements. then try to mess with border as suggested here
.bigbox:before{
content:'';
color:red;
top:90px;
left:8px;
width: 0;
height: 0;
border-left: 210px solid transparent;
border-right: 0px solid transparent;
border-bottom: 10px solid black;
position:absolute;
}