使用 css 在图像上添加角度答案

【问题标题】：Adding an angle on the image using css使用 css 在图像上添加角度
【发布时间】：2017-10-03 02:09:50
【问题描述】：

如何得到我们在图片中看到的角度Trying to create an angle in the image which will reside inside a div element

【问题讨论】：

如果您想获得正确答案，请发布您使用的代码
怎么样？使用 css 伪元素
一个点有{x,y}。你有两个点p1 和p2。方位角（从 3 点钟开始的角度）是 bearing = Math.atan2(p2.y - p1.y, p2.x - p1.x);，单位为弧度，乘以 180 / PI 或 57.2958 转换为度数

【解决方案1】：

您可以通过使用::after 伪元素并对其应用skew 变换来实现此效果。

工作示例：

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>

【讨论】：