为div

Question

我正在尝试在div的左边添加一个设定角度。我可以用图像做到这一点，但如果可能的话，宁愿用CSS直接实现它。

以下是一个示例 - 1

Answer 1

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用一个DIV作为旋转的背景，并使用一个DIV作为常规显示的文本。