JTC JTC -4 years ago 117
CSS Question

2 Column with triangle on first column

How can I achieve this?

enter image description here

Thanks in advance

Answer Source

One approach is to add ::before and ::after pseudo-elements to the first column and then use CSS to position and rotate the pseudo-elements.

Working Example:

div {
position: relative;
display: inline-block;
width: 300px;
height: 120px;
text-align: center;
font-weight: bold;
font-family: arial, helvetica, sans-serif;
text-transform: uppercase;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
vertical-align: top;
}

div + div {
left: -6px;
background: url('http://placekitten.com/300/120');
}

div h2 {
font-size: 14px;
margin: 24px 2px 2px;
}

div p {
position: relative;
z-index: 12;
font-size: 18px;
margin-top: 2px;
}

div::before,
div::after {
content: '';
position: absolute;
display: block;
width: 68px;
height: 68px;
right: -19px;
z-index: 6;
background-color: rgb(0, 0, 0);
}

div::before {
top: 12px;
transform: rotate(62deg);
}

div::after {
bottom: 12px;
transform: rotate(-62deg);
}

div + div::before,
div + div::after {
display: none;
}
<div>
<h2>Column 1</h2>
<p>Text Container<br />with Arrow on Right</p>
</div>

<div>
<h2>Column 2</h2>
<p>Image Frame</p>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download