I've been working with the code below: https://jsfiddle.net/5uoz3mqz/1/
.triangle {
text-align: center;
width: 100%;
height: 0px;
border-style: inset;
border-width: 0 300px 300px 0;
border-color: transparent #f08326 transparent transparent;
position: absolute;
}
.page-title {
position: relative;
text-align: center;
font-family: "bebas";
font-size: 30px;
color: #fff;
text-transform: uppercase;
padding: 5px;
background-color: rgba(15, 138, 199, 0.87);
border: 0.1em solid rgba(4, 79, 102, 0.22);
width: 130px;
}
<div class="triangle">
<div class="page-title">White Labs</div>
<p>Some text here to make dasssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
</div>
Is there a way to center both the title box and the text on top of the triangle div? I want the triangle to remain on the side while having the title box and centered text above it.
Thanks,