CSS制作小三角形

简介: CSS制作小三角形

今天,我们来看一个用CSS制作小三角形的实例。这里用到的知识就是上次我们学到的border,具体代码如下:


<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    *{      margin: 0;      padding: 0;    }    div{      position: absolute;      left:50px;      top:50px;      width: 0px;      height:0px;      border:40px solid white;      border-top-color: red;      border-right-color: blue;      border-bottom-color: black;      border-left-color: pink;    }</style></head><body>  <div></div></body></html>

运行完效果如下:

这里我们用div创建了一个白色的盒子,然后利用border-top/left/right/bottom更改颜色,实现了三角形的效果。自己动手试试吧😄

相关文章
|
6月前
|
前端开发
CSS画三角形(三种方法)
CSS画三角形(三种方法)
|
6月前
|
前端开发
css实现伪类三角形气泡框 带边框
css实现伪类三角形气泡框 带边框
59 3
|
6月前
|
前端开发
玩转CSS盒子之 三角形盒子
玩转CSS盒子之 三角形盒子
58 0
|
12月前
|
前端开发
如何用CSS 画一个三角形?
如何用CSS 画一个三角形?
70 0
|
29天前
|
前端开发
如何使用css写三角形
如何使用css写三角形
23 4
|
1月前
|
前端开发
用纯 CSS 创建一个三角形
使用纯 CSS 可以通过边框技巧创建三角形。例如,要创建一个指向下方的等边三角形,可以将 `width` 和 `height` 设为 `0`,并通过透明的左右边框和有颜色的底边来形成三角形。
|
1月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
|
3月前
|
前端开发
如何使用css写三角形
如何使用css写三角形
36 1
|
4月前
|
前端开发
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
72 1
|
5月前
|
前端开发
技术经验分享:CSS画三角形(三种方法)
技术经验分享:CSS画三角形(三种方法)
24 0