Add an angle to the edge fo a div

user_8280992 0
Viewed 54

I'm trying to add a set angle to the left edge of a div. I can do this with an image but would rather achieve it directly with CSS if possible.

Here is an example - 1

css html
2 Answers

body {
background-color: rgb(191, 191, 191);
}

div {
position: relative;
width: 300px;
height: 180px;
background-color: rgb(255, 255, 255);
border: 12px solid rgba(0, 0, 0, 0.6);
}

img {
display: block;
float: left;
width: 160px;
height: 180px;
}

div::after {
content: '';
display: block;
position: absolute;
top: 0;
right: 100px;
z-index: 0;
width: 80px;
height: 180px;
background-color: rgb(255, 255, 255);
transform: skew(-20deg);
}

div p {
position: relative;
z-index: 12;
margin-left: 156px;
}
<div>
<img src="http://placekitten.com/g/160/180" alt="Kitten" />
<p>More div content...</p>
<p>More div content...</p>
<p>More div content...</p>
<p>More div content...</p>
</div>

user_78057930

You could use one DIV for the background which is rotated and one DIV for the text that is displayed as usual.

user_1975740
Related