用css制作带三角矩形

最新推荐文章于 2022-08-30 16:53:38 发布

liujianhuan0622

最新推荐文章于 2022-08-30 16:53:38 发布

阅读量7.5k

点赞数

分类专栏： web前端开发文章标签： css 布局带三角矩形伪元素

本文链接：https://blog.csdn.net/liujianhuan0622/article/details/46537231

版权

web前端开发专栏收录该内容

14 篇文章

订阅专栏

在网页中通常会见到一种带三角的矩形框，常见于注释或者弹框提示。在百度2015校园招聘的笔试题目中也有一道题目要求利用css来绘出一个带三角矩形。如图所示。

在css中，三角形是采用盒子模型的border属性来绘制的。所以在进行上图绘制之前有必要回顾一下css盒子模型。css盒子模型同一方向共有四个属性，比如横向有margin，border，padding，width。其中width指定内容区域的宽度，margin和padding为内外边距，外边距表示盒与盒之间的距离，内边距表示内容距离border的距离，border表示边框的宽度。css盒模型的border属性如图所示，它是由上右下左四个梯形构成。

在上图中将width和height属性都设置为0px，就可以得到一个由四个三角形组合而成的矩形，如图。

到此时就可以得到一个三角形了，只需要将其余边框的颜色设置为白色或者透明，为了具有很好的扩展性，本文将其设置为透明，即border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;得到如图所示三角形。

到此时，已经不难想象到最初的带三角矩形边框如何得到了，可以将其分解为三个过程。如图。

按照这三个过程，很容易想到使用3个div来进行绘制，其中一个绘制矩形边框，一个绘制红色三角形，最后一个绘制白色三角形。但是在百度的笔试题目中只给出了一个div，所以这里需要使用css伪元素。详细代码如下：

<!DOCTYPE HTML>
<html lang="en">
  <head>
    
    <title>The HTML5 Herald</title>
	<link type="text/css" rel="stylesheet" href="css/style.css">
  </head>
  <body>
  <div id="cssTest"></div>
  </body>
</html>

#cssTest{
	float:left;
	width:200px;
	height:200px;
	border:2px solid red;
	position:relative;
	left:20px;
	top:20px;
}
#cssTest:before{
	content:"";
	border:20px solid red;
	border-top-color:transparent;
	border-right-color:transparent;
	border-bottom-color:transparent;
	width:0px;
	height:0px;
	position:absolute;
	left:202px;
	top:50px;
}
#cssTest:after{
	content:"";
	border:19px solid #fff;
	border-top-color:transparent;
	border-right-color:transparent;
	border-bottom-color:transparent;
	width:0px;
	height:0px;
	position:absolute;
	left:200px;
	top:51px;
}

更多资讯可以关注微信扫描二维码关注：