如何用 CSS 实现三角形

1. 绘制一个拥有四种不同边框颜色的正方形
2. 将正方形的宽度设为0，高度可以去掉
3. 除了某个方向的三角，其他颜色全部设为透明
4. 总结

1. 绘制一个拥有四种不同边框颜色的正方形

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>.border{width:50px;height: 50px;border-width: 50px;border-style: solid;border-color: red yellow blue green;}
</style>
<body>
<div class="border"></div>
</body>
</html>

效果

2. 将正方形的宽度设为0，高度可以去掉

备注：不能将宽度去掉，因为 div 为块级标签，去掉宽度值，会平铺整个区域。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>.border{border-width: 50px;border-style: solid;border-color: red yellow blue green;}
</style>
<body>
<div class="border"></div>
</body>
</html>

效果

3. 除了某个方向的三角，其他颜色全部设为透明

备注：四个方向的颜色设定分别为上右下左的顺序。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>.border{border-width: 50px;border-style: solid;border-color: red transparent transparent transparent;}
</style>
<body>
<div class="border"></div>
</body>
</html>

效果

4. 总结

4.1 去掉高度，宽度设为 0 ；
4.2 border 宽度为三角高度；
4.3 border 颜色留一边，其他全部透明色。

如何用 CSS 实现三角形相关推荐

如何用css画三角形
在设计稿中,经常会出现好多三角形,如果将三角形变成图片,通过img标签的src或者background中的url来访问,从前端性能方面来看这并不好.那问题来了,如何用css来画三角形呢?别着急,先来看 ...
splitpane如何设置竖条的宽度_如何用 CSS 画三角形和箭头
三角形和箭头这两个图标在网页中经常会用到,例如:下拉选择框.排序.返回到上一页.导航条,分页都会用到三角形或者箭头,当然是用图片的方式的确可以实现这一样式,但是是用图片如果调整颜色那就比较困难了,除非 ...
css竖向箭头符号_如何用css实现三角形符号代码
展开全部 CSS/*向上的三角*/ .arrow-up { width:0; height:0; border-left:30px solid transparent; border-right:30 ...
简单用CSS实现三角形
CSS实现三角形看到一个面试问题:如何用css实现三角形,em,想到自己没写过,然后就实现了下. 方法: (1)将div的宽高设置成0 (2)加boder属性(四个方向的边框可以实现不同方向的三角 ...
如何用css绘制一个五角星并添加旋转动画
关于三角形的绘制,大家已经贡献过诸如将五角星切割成三个三角形来绘制等的更加标准简洁的画法,这篇文章权当抛砖引玉,为大家贡献一些不一样的思路吧,当然这个五角星的完成度也不是特别完美,有任何意见也欢迎大佬 ...
如何用CSS画一个三角形？
hello,大家好,最近在看前端的八股,里面有这样一道题,如何用CSS画出三角形?我想以这个题为例,仔细讲一下这个题的技巧,以及对这道题拓展一下,即如何画出圆形和椭圆形? 首先,如何用CSS画一个三角 ...
CSS 如何用border绘制三角形、等腰梯形、直角梯形
CSS 如何用border绘制三角形.等腰梯形.直角梯形 border 有宽度后,四角交接处会产生斜线,可根据此原理绘制三角形.等腰梯形.直角梯形等图形. div {width: 50px;heigh ...
html中怎么设置页面的弧度,如何用css实现弧度圆角?三角形以及圆形
如何用css实现弧度圆角?三角形以及圆形用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; ...
html如何设置打印分页打印出来,网页中如何用 CSS 设置打印分页符
Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. 第 1 页第 2 页第 3 页任何浏览器 ...

如何用 CSS 实现三角形

如何用 CSS 实现三角形

1. 绘制一个拥有四种不同边框颜色的正方形

2. 将正方形的宽度设为0，高度可以去掉

3. 除了某个方向的三角，其他颜色全部设为透明

4. 总结

如何用 CSS 实现三角形相关推荐

最新文章

热门文章