CSS：使用CSS绘制三角形

如下代码：写一个带有宽度高度的div，并为其增加边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{height: 100px;width: 100px;margin: 100px auto;background-color: black;border-left: blue solid 50px;border-top: green solid 50px;border-bottom: red solid 50px;border-right: yellow solid 50px;}</style>
</head>
<body><div></div>
</body>
</html>

运行效果：

CSS会自动在交界处隔开。

删除div高度和宽度，呈现如下效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{height: 0;width: 0;margin: 100px auto;/*background-color: black;*/border-left: blue solid 50px;border-top: green solid 50px;border-bottom: red solid 50px;border-right: yellow solid 50px;}</style>
</head>
<body><div></div>
</body>
</html>

运行效果：

即可得到思路，需要哪一种三角形，将其他的设置为透明即可。
比如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{height: 0;width: 0;margin: 100px auto;/*background-color: black;*/border-left: transparent solid 50px;border-top: transparent solid 50px;border-bottom: transparent solid 50px;border-right: yellow solid 50px;}</style>
</head>
<body><div></div>
</body>
</html>

运行效果：

又比如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{height: 0;width: 0;margin: 100px auto;/*background-color: black;*/border-left: transparent solid 50px;border-top: transparent solid 50px;border-bottom: yellow solid 50px;border-right: yellow solid 50px;}</style>
</head>
<body><div></div>
</body>
</html>

CSS：使用CSS绘制三角形相关推荐

前端HTML、CSS、JS绘制三角形的方法
转载自 http://www.daqianduan.com/4721.html <html><head><meta charset="UTF-8"&g ...
css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
[css] 用CSS绘制一个三角形
[css] 用CSS绘制一个三角形 .triangle{width: 0;border-bottom: 35px solid lightgreen;border-left: 35px solid tr ...
html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
CSS绘制三角形图标
CSS绘制三角形图标目录 1CSS绘制三解形图标原理 2 页面效果 3 HTML结构 4 CSS样式 1CSS绘制三解形图标原理对内容容器进行相对定位,对内容容器的伪元素:before和:after ...
CSS：N种使用CSS 绘制三角形的方法
目录 6种使用 CSS 实现三角形的技巧 1.使用 border 绘制三角形 2.使用 linear-gradient 绘制三角形 3.使用 conic-gradient 绘制三角形 4.transf ...
CSS - Tooltip-arrow 绘制三角形
问题:纯CSS实现bubble的三角形部分方法:使用border来绘制三角形:例如 1 .trangle { 2 width: 0; 3 border-color: transparent; 4 b ...
CSS绘制三角形原理及应用
更多精彩内容可以访问我的博客Aelous-BLog 在从 PSD 到 HTML 页面的过程中,免不了要遇到一个问题:"这个小图标,可以用 CSS 效果实现,也可以切图下来,到底该怎么选择呢? ...

CSS：使用CSS绘制三角形

CSS：使用CSS绘制三角形相关推荐

最新文章

热门文章