Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.2k views
in Technique[技术] by (71.8m points)

视频能实现内凹圆角吗?

image
如上图所示:有办法将视频右下角弄成内凹圆角吗?视频是盖在一个可拖动地图上的,所以不能采用传统在视频右下角盖圆角图片的方式。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

clip-path,比如对于DOM结构:

<div class="container">
    <div class="box"></div>
</div>

让box右下角缺角25px并且不遮挡container:

.container {
    background: green;
    width: 200px;
    height: 200px;
}

.box {
    background: yellow;
    width: 150px;
    height: 100px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%);
}

效果:
image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...