Mannu Nayyar Mannu Nayyar - 2 months ago 6
CSS Question

Make a custom div shape

How to make a div like this? Any ideas please.

enter image description here

Here's my code so far: jsFiddle



.triangle-up-left {
width: 0;
height: 0;
border-style: solid;
border-width: 20px 15px 0 0;
border-color: #007bff transparent transparent transparent;
position: absolute;
}

.category-span {
padding: 10px;
background-color: red;
}

<div class="row">
<span class="category-span">Category</span><span class="triangle-up-left"></span>

</div>




Answer

Here is a quick solution, try it:

#shape {
  border-top: 100px solid black;
  border-right: 60px solid transparent;
  width: 300px;
}
#text {
  margin-top: -70px;
  padding-left: 50px;
  color: white;
  font-size: xx-large;
}
<div id="shape"></div>
<div id="text">Category</div>