猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

这种凹角用css3如何实现

https://img4.mukewang.com/5b8be7860001dfb701800355.jpg

慕的地8271018
浏览 1550回答 2
2回答

料青山看我应如是

<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Title</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; .outer{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 500px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #0a6ebd;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #0a6ebd;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .inner-1{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 250px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 450px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #0da6ec;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-top-left-radius: 25px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .inner-2{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 400px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #00bcd4;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-top-left-radius: 25px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .left-corner{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 25px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 25px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* border-radius: 100%; */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom-right-radius: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: inherit;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: -1px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: -1px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; z-index: 10;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom: 1px solid red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-right: 1px solid red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <div class="outer">&nbsp; &nbsp; &nbsp; &nbsp; <div class="inner-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="left-corner" style=" &nbsp; &nbsp;background-color: #0a6ebd;"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="inner-2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="left-corner" style="background-color: #0da6ec;"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3