这种凹角用css3如何实现
问题描述
问题解答
回答1：<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <style>.outer{ position: absolute; left: 100px; top: 100px; width: 300px; height: 500px; background-color: #0a6ebd; display: flex; justify-content: center; align-items: center; box-sizing: border-box; border: 1px solid #0a6ebd;}.inner-1{ width: 250px; height: 450px; box-sizing: border-box; background-color: #0da6ec; position: relative; display: flex; justify-content: center; align-items: center; border: 1px solid red; border-top-left-radius: 25px;}.inner-2{ width: 200px; height: 400px; box-sizing: border-box; background-color: #00bcd4; position: relative; border: 1px solid red; border-top-left-radius: 25px;}.left-corner{ width: 25px; height: 25px; /* border-radius: 100%; */ border-bottom-right-radius: 100%; background-color: inherit; position: absolute; left: -1px; top: -1px; z-index: 10; border-bottom: 1px solid red; border-right: 1px solid red; box-sizing: border-box;} </style></head><body> <p class='outer'><p class='inner-1'> <p style=' background-color: #0a6ebd;'></p> <p class='inner-2'><p style='background-color: #0da6ec;'></p> </p></p> </p></body></html>回答2：
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'><head> <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'> <title>css</title></head><body><style>#a { width: 150px; height: 300px; background: radial-gradient(circle at top left, transparent 15px, #e6e4b7 0) top left, radial-gradient(circle at top right, transparent 15px, #e6e4b7 0) top right, radial-gradient(circle at bottom right, transparent 15px, #e6e4b7 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #e6e4b7 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; padding: 20px 24px 22px 20px;}#b { display: block; background: radial-gradient(circle at top left, transparent 15px, red 0) top left, radial-gradient(circle at top right, transparent 15px, red 0) top right, radial-gradient(circle at bottom right, transparent 15px, red 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, red 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; width:100%; height: 100%; padding: 2px;}#b:before { content: ''; width: 100%; height: 100%; display: block; background: radial-gradient(circle at top left, transparent 15px, #e6e4b7 0) top left, radial-gradient(circle at top right, transparent 15px, #e6e4b7 0) top right, radial-gradient(circle at bottom right, transparent 15px, #e6e4b7 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #e6e4b7 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat;}</style> <p id='a'><p id='b'></p> </p></body></html>回答3：
假设这个p id是a
#a { width: 100px; height: 300px; background: radial-gradient(circle at top left, transparent 8px, #e6e4b7 0) top left, radial-gradient(circle at top right, transparent 8px, #e6e4b7 0) top right, radial-gradient(circle at bottom right, transparent 8px, #e6e4b7 0) bottom right, radial-gradient(circle at bottom left, transparent 8px, #e6e4b7 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat;}
具体参数自己调一下
回答4：border-radius?
回答5：这个是横着的，但也比较接近了：http://jsfiddle.net/x4wLf/
相关文章：
1. android - java 泛型不支持数组，那么RxJava的Map集合有什么方便的手段可以定义获得一串共同父类集合数据呢？2. javascript - vue 移动端的input 数字输入优化3. javascript - 有什么兼容性比较好的办法来判断浏览器窗口的类型？4. java - 自己制作一个视频播放器，遇到问题，用的是内置surfaceview类，具体看代码！5. java - mongodb分片集群下，count和聚合统计问题6. 为什么我ping不通我的docker容器呢？？？7. 服务器端 - 采用nginx做web服务器，C++开发应用程序 出现拒绝连接请求？8. python - pandas按照列A和列B分组，将列C求平均数，怎样才能生成一个列A,B,C的dataframe9. 关于docker下的nginx压力测试10. java - 静态属性中的赋值和静态代码块中的赋值有什么区别？
网公网安备