尖角对话框伪类三角形

最新推荐文章于 2021-05-27 01:21:04 发布

灬与

最新推荐文章于 2021-05-27 01:21:04 发布

阅读量334

点赞数

分类专栏： css整理文章标签：尖角对话框

本文链接：https://blog.csdn.net/weixin_43703162/article/details/84561110

版权

css整理专栏收录该内容

3 篇文章 0 订阅

订阅专栏

尖角对话框的实现

效果图
尖叫对话框
代码：

/*带尖角的对话框*/
.box{
    position: relative;
    width: 200px;
    height: 200px;
    border: 2px solid #000;
    background-color: #fff;
}
.box:before{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    left: 200px;
    top: 20px;
    border-left: 10px solid #000;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.box:after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    left: 200px;
    top: 23px;
    border-left: 7px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.box2{
    position: relative;
    width: 200px;
    height: 200px;
    border: 2px solid #000;
    background-color: #fff;
}
.box2:before{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    left: 200px;
    top: 20px;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #000;
}
.box2:after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    left: 200px;
    top: 22px;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #fff;
}
.box3{
	position:relative;
	width:200px;
	height:200px;
	border:2px solid #000000;
}
.box3:before{
	position: absolute;
	content:'';
	width:0;
	height:0;
	left:90px;
	bottom:100%;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-bottom:10px solid #000;
}		
.box3:after{
	position: absolute;
	content:'';
	width:0;
	height:0;
	left:93px;
	bottom:200px;
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-bottom:7px solid #fff;
}

伪类元素中的位置属性和border宽度需要根据实际宽度计算