如何将CSS边框设置为90而不是45度角？
如何将CSS边框设置为90而不是45度角？
提问于 2018-08-14 06:49:53
我有一个不同颜色的div，用于边框底部和边框右属性。因此，他们是通过一条线分开，离开盒子在一个45度的角度。
如何使底部边框变短，使右边框一直延伸到元素的底部，从而产生一条90度角的分隔线？
回答 2
Stack Overflow用户
发布于 2018-08-14 15:28:05
对于顶部边框和底部边框，可以使用box-shadow:
.box {
border: 10px solid #ddd;
border-top: 0;
border-bottom: 0;
box-shadow: 0 10px 0 #D03FBE, 0px -10px 0 #D03FBE;
float: left;
width: 100px;
height: 100px;
}<div class="box"></div>
Stack Overflow用户
发布于 2018-08-14 16:08:15
为了模拟对接接头，可以叠加两个div以获得模拟结果：
<style>
div {
position:absolute;
left:0;
top:0;
height:100px;
width: 100px;
}
</style>
<div style="border-left: 2px solid #ff0000; border-bottom: 2px solid #ff0000;">
</div>
<div style="border-right: 2px solid #00ff00; border-top: 2px solid #00ff00;">
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100002153
复制相关文章
相似问题