I want a div that has an "angle like shape on the left". How can I create this with CSS3 only? I am assuming this requires 2 divs? I know I can make a rectangle div and fill it back, and have yellow text. Though I don't know what I can do to make the triange shape on the left. Can it be done with done div only? Or does it need 2? Looking for the best way to do this.
You can achieve this using linear-gradient. Demo:
.text {
width: 400px;
background-image: linear-gradient(45deg, transparent 50px, black 50px);
padding-left: 100px;
color: yellow;
}<div class="text">
<h1>Some Name Here</h1>
</div>Why not try something like this:
.triangle {
width: 0;
height: 0;
border: 50px solid black;
border-bottom-color: transparent;
border-left-color: transparent;
float: left;
}
.text {
width: 400px;
height: 100px;
background-color: black;
float: left;
color: yellow;
}<div class="triangle"></div>
<div class="text"><h1>Some Name Here</h1></div>See How do CSS triangles work? for more info on this.
::before to do this so you don't need two elements.
You can use of Pseudo Elements ::before or ::after
.triangle {
padding: 10px;
position: relative;
background-color: #000;
color: yellow;
display: inline-block;
margin-left: 40px;
}
.triangle::after {
content: "";
position: absolute;
border: 19px solid #000;
height: 0;
width: 0;
left: -38px;
top: 0;
bottom: 0;
margin: auto;
border-left-color: transparent;
border-bottom-color: transparent;
}<div class="triangle">
text-here
</div>Style Accordingly.
You can use clip-path but it has not so good browser support. I'm using 100vmax 100vmax here to achieve 45 degrees clipping. Demo:
.text {
width: 400px;
background-color: black;
-webkit-clip-path: polygon(100vmax 100vmax, 0% 0%, 100% 0%, 100% 100%);
clip-path: polygon(100vmax 100vmax, 0% 0%, 100% 0%, 100% 100%);
padding-left: 100px;
color: yellow;
}<div class="text">
<h1>Some Name Here</h1>
</div>