CSS 构造三角箭头

2022-03-08 12:32:43 阅读：222 来源： 互联网

标签：photo frame 三角梯形等腰三角箭头 border transparent CSS

总所周知，在CSS的世界中有很多样式和效果看起来简单实则不那么简单，就比如一个小小的▲符号元件，也是通过指定样式产生的，而并不是开箱即用的产物。

要掌握如何设计一个理想的▲符号元件，我们就必须先深入了解边框border的结构组成。
代码如下：

.frame {
  background-color: #ccc;
  height: 150px;
  width: 130px;
  line-height: 150px;
  text-align: center;
  border: 10px solid;
  border-color: #000 #f00 #0f0 #00f;
}

<div class="frame">photo frame</div>

输出结果：

photo frame

可以明显看见的是四条边框并不是矩形而是梯形，就如同相框的边一样。然而当你只设计了其中一条边框的时候，浏览器会裁去左右多余的小三角形，如同这样：

photo frame

看到这里其实就很明确了，要设计一个理想的▲符号元件我们可以利用border的性质着手，就像这样：

如上图右下角所示，我们可以将boredr的下方的梯形边裁掉一个平行四边形从而得到一个等腰三角形。具体办法就是首先我们使梯形的上底为0，也就是成为一点，而下底等长缩减，这样就得到了一个等腰三角形。
具体代码思路如下：

<html>
<head>
<style>
.frame2 {
  content: "";/* 指定元素内容为空，使得梯形边上底为0，从而每边得到一个等腰三角形 */
  border: 10px solid;/* 指定宽度样式 */
  border-color: #000 transparent transparent transparent;/* 保留一边，其余边透明去除 */
}
</style>
</head>
<body>
<span class="frame2"></span><!-- 内联元素不会占一行导致上下边无法形成等腰三角形 -->
</body>
</html>

效果如下：

标签：photo,frame,三角,梯形,等腰三角,箭头,border,transparent,CSS
来源： https://www.cnblogs.com/mxyulin/p/15979891.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS 构造三角箭头