请问一下各位大佬下面这个图片用HTML和CSS该怎么做
发布网友
发布时间：2022-04-06 11:47
共2个回答
热心网友
时间：2022-04-06 13:16
关键点有两个，一是两个图片要重叠，二是把重叠上去的图片绘制成三角形。
关于第二点需要用到clip-path属性。它有很多用法，可以绘制多边形，圆形，椭圆形和圆角。
关于clip-path的使用
polygon
值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。
左上角为原点，右下角是(100%,100%)的点。
circle
值为一个坐标点和半径组成。
左上角为原点，右下角是(100%,100%)的点。
定义半径的时候可以用at关键字来定义坐标。
ellipse
值为椭圆的x轴半径，y轴半径，定位椭圆的坐标三部分组成。
左上角为原点，右下角是(100%,100%)的点。
at关键字将半径和坐标分开。
inset
值为(上 右 下 左 round 左上角radius 右上角radius 右下角radius 左下角radius)
round前面的数值，表示的是距离，如果第一个值为25%，则表示图像在上面从25%开始绘制。
为什么我要说这么多废话，因为字数少了百度觉得答案不靠谱！！
以下为代码：
以下为效果图
请点采纳！
热心网友
时间：2022-04-06 14:34
div {position:relative; width:480px; height:400px;}
div img {position:absolute; left:0; top:0; width:100%; height:100%}
div img:nth-child(2) {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 20%);}
</style>
<div>
<img src="左下角的图片"/>
<img src="右上角的图片"/>
</div>
