midstack midstack - 7 months ago 17
HTML Question

Can I create cross lined background box with pure css

enter image description here

I want to create band for my widget title as above image and HTML structure like this;

<div class="wt">
<div class="blue-area">text</div>
<div class="green-area">text</div>
</div>


Text length changeable , so may vary blue area width like this;

enter image description here

Can I create this with pure css?

Answer

Theres a fair bit of CSS here, but I think it's what you're looking for. I've achieved the look of an arrow by the use of the ::after pseudo element:

.blue-area, .green-area{
    display:inline-block;
    line-height:30px;
    height:30px;
}
.blue-area{
    padding:0 0 0 8px;
    background-color:#26799b;
    position:relative;
}
.blue-area:after{
    content:'';
    position:absolute;
    left:100%;
    top:0;
    border-color:transparent transparent #26799b transparent;
    border-style:solid;
    border-width:0 30px 30px 0;
    display:block;
}
.green-area{
    background-color:#386c19;
    padding:0 8px 0 30px;
}

I've also had to make the <div>s a fixed height, due to not being able to size the triangle relatively. Go ahead, change the text and watch the <div>s change appropriately.

JSFiddle