html画一个倒三角,css 三角形画法

css 三角形画法

项目中，会有一些边角的位置使用的三角形的地方，这时候如果没有刻意改变，可使用 css 来实现。

使用 border 实现三角形的画法：

triangle 实现

#triangle-up{ //向上三角形样式

width:0px;

height:0px;

border-left:50px solid transparent;

border-right:50px solid transparent;

border-bottom:60px #f00 solid;

}

#triangle-left{ //向左三角形样式

width:0px;

height:0px;

border-top:50px solid transparent;

border-bottom:50px solid transparent;

border-right:60px #0f0 solid;

}

#triangle-right{ //向右三角形样式

width:0px;

height:0px;

border-top:50px solid transparent;

border-bottom:50px solid transparent;

border-left:60px #00f solid;

}

#triangle-down{ //向下三角形样式

width:0px;

height:0px;

border-left:50px solid transparent;

border-right:50px solid transparent;

border-top:60px #f00 solid;

}

说明：(以向上三角形事例说明)

html元素可以是块级元素，也可以是行级元素、行内元素；

css 样式中, 类似将border分成了上下左右四块，每个三角形的实现都只用了三部分，另外一部分的样式则为 0；

css样式中，缺少的那一部分的对立样式(如上对应下，左对应右)，则为设置三角形的高度和方向，其中高度的增加方向，是从尖头向平头的方向增加，而颜色则为三角形的背景色；

小小的积累，成就大大的收获！！！

标签：画法,solid,50px,三角形,0px,border,transparent,css

来源： https://blog.csdn.net/qq_43344133/article/details/90340587

html画一个倒三角,css 三角形画法相关推荐

css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
用 CSS 画一个带阴影的三角形
1. 思路怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
7-57 又来一个上三角数字三角形 (10 分)
输入一个正整数n,输出具有n层的上三角数字三角形. 输入格式: 只有一个正整数n,1<=n<=100. 输出格式: 一个上三角数字三角形,每个数字占四个字符位置. 输入样例: 5 输出样例 ...
又来一个上三角数字三角形
R7-16 又来一个上三角数字三角形 (10 分) 输入一个正整数n,输出具有n层的上三角数字三角形. 输入格式: 只有一个正整数n,1<=n<=100. 输出格式: 一个上三角数字三角形 ...
画一个空心圆_用SolidWorks画一个空心挂钩，这种画法稍微有点麻烦
建模过程 1.在[右视基准面]画一个圆. 2.[旋转]. 3.还是在[右视基准面]画圆. 4.[拉伸凸台]等距:75 ,给定深度:30 . 5.在[前视基准面]画圆弧和直线.(上方是两段圆弧) 6.在 ...
用java画一个网格_用SolidWorks画一个空心挂钩，这种画法稍微有点麻烦
建模过程 1.在[右视基准面]画一个圆. 2.[旋转]. 3.还是在[右视基准面]画圆. 4.[拉伸凸台]等距:75 ,给定深度:30 . 5.在[前视基准面]画圆弧和直线.(上方是两段圆弧) 6.在 ...
css如何在下拉框添加倒三角,CSS给选中元素增加倒三角形(示例代码)
需求如下: 给选中的item添加一个select样式,并且生成一个下三角形一.三角形的实现原理宽度width为0:height为0:根据三角形的朝向设置上下左右的border,只能设置其中的三个边 ...
HTML下拉选框加倒三角,CSS给选中元素增加倒三角形
需求如下: 给选中的item添加一个select样式,并且生成一个下三角形一.三角形的实现原理宽度width为0:height为0:根据三角形的朝向设置上下左右的border,只能设置其中的三个边 ...
案例——京东三角+CSS三角形
案例:京东三角 1.效果图 2.代码参考 <!DOCTYPE html><html lang="en"><head><meta chars ...

html画一个倒三角,css 三角形画法

html画一个倒三角,css 三角形画法相关推荐

最新文章

热门文章