css-带尖角的框-1.1

最新推荐文章于 2023-11-22 12:00:24 发布

彩舒

最新推荐文章于 2023-11-22 12:00:24 发布

阅读量456

点赞数

分类专栏：前端技术文章标签：带尖角 css

本文链接：https://blog.csdn.net/caishu1995/article/details/79030961

版权

前端技术专栏收录该内容

105 篇文章 1 订阅

订阅专栏

最后我需要一个如上图的框，这就需要用到css的:before :after这两个，首先画一个框

<div class="baseStyle"></div>

.baseStyle{
	border: 1px solid #cccccc;
	border-radius: 10px;
	height: 25px; 
	position: relative;
	width: 128px;
}

结果：

然后加上:before

.baseStyle:before {   
    border: 10px solid transparent;  /*10px是半径*/
    border-bottom-color: #cccccc;
    content: '';  
    height: 0;   
    left: 20px;                      /*距离左侧边距*/
    margin-top: -20px;
    position: absolute;  
    top: 0px;                        /*距离顶部边距*/
    width: 0;  
}

结果是

然后加上:after

.baseStyle:after {
    border: 8px solid transparent;  /*8px是半径*/  
    border-bottom-color: #FFFFFF; 
    content: ""; 
    height: 0; 
    left: 21.5px;                   /*距离左侧边距*/
    margin-top: -16px;  
    position: absolute;    
    top: 0;                         /*距离顶部边距*/
    width: 0;   
}

就可以了