问题描述：

有时候我们需要使用到三角形图标，如果直接使用SVG图标，会增大项目体积（虽然不是很大），而且使用起来也比较繁琐
如果直接使用 CSS 制作，使用起来会更加方便

解决方案：

添加一个空的 div 标签，然后使用 border 属性进行绘制
首先将该标签的宽高置为 0
然后设置三角形宽度 border-width
再然后设置三角形颜色 border-color，并将其它三个方向设置为透明（transparent）
最后设置 border-style 为实线（solid）

<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>

// 向上的三角形
.top {width: 0;height: 0;border-width: 40px;border-color: transparent transparent red transparent;border-style: solid;
}
// 向右的三角形
.right {width: 0;height: 0;border-width: 40px;border-color: transparent transparent transparent red;border-style: solid;
}
// 向下的三角形
.bottom {width: 0;height: 0;border-width: 40px;border-color: red transparent transparent transparent;border-style: solid;
}
// 向左的三角形
.left {width: 0;height: 0;border-width: 40px;border-color: transparent red transparent transparent;border-style: solid;
}

使用 border 属性制作三角形相关推荐

巧用CSS的Border属性制作特效菜单
许多应用软件的主菜单都具有这样的效果,通常是暗色的,一旦鼠标移到菜单上,立即变明亮:鼠标不在菜单上时是平面的,一旦鼠标移到菜单上,菜单条立即变为立体,从而增强了菜单的效果.你是否也想使网页中的导航菜单 ...
使用border属性绘制三角形、五角星、心形
1. 绘制三角形 <p>直角三角形</p> <section class="triangle1"><style>#triangle1 ...
HTMLCSS学习笔记（二十四）——利用border属性制作太极图与哆啦A梦
旋转太极图 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
制作不同方向的三角形（border属性）
border属性详解: border:10px solid red: border-width:10px; border-style:solid; border-color:red; 1.线性:so ...
利用border制作三角形原理
网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...
【css】巧用border制作三角形
#css用border制作三角形 1.利用CSS盒模型盒模型上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角调整宽高大小可以调节三角形形 ...
Css3制作三角形图标
在建站过程中,有时候需要给部分容器添加装饰效果,这样就会添加小图标,今天和大家分享用Css3制作三角形图标. 在Css3之前,我们使用transparent属性来实现背景颜色透明,在CSS3中我们使用 ...
CSS - 制作三角形
目录一.实现原理二.三角形制作案例 1.一个简单的三角形 2.直角三角形 3.带边框的三角形一.实现原理其实实现的原理很简单,就是通过css的border属性进行制作.那么为什么border属 ...

使用 border 属性制作三角形

问题描述：

解决方案：

使用 border 属性制作三角形相关推荐

最新文章

热门文章