利用css构建三角形（正三角，倒三角，左/右三角）

上三角

#triangle-up {width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

下三角

#triangle-down {width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

左三角

#triangle-left {width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}

右三角

#triangle-right {width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}

左上三角

#triangle-topleft {width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

右上三角

#triangle-topright {width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}

左下三角

#triangle-bottomleft {width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}

右下三角

#triangle-bottomright {width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}

利用css构建三角形（正三角，倒三角，左/右三角）相关推荐

html实现三角形树状图,图解利用CSS实现三角形
利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0,margin,padding也为0,所以元素框的大小就是他的border的叠 ...
利用css制作三角形
1.首先制作一个正方形只设置边框 2.除了上边框其它边框都设置透明色(transparent) <style>div {width: 100px;height: 100px;border: ...
如何利用CSS画三角形、圆形、柠檬、小药丸?
一.用边框线画出三角形方法: 1.盒子边框全设为0 2.把不要的边框线颜色设为透明 .box { border-left: 30px solid transparent; border-right: ...
利用css 画三角形
1.先画一个正方形 2.在定义4条边框,你想那个三角形朝哪个方向就给那条边框定义颜色,其余边框颜色设置透明. transparent :透明 <!DOCTYPE html> <htm ...
html直角三角形怎么实现,CSS绘制三角形的实现代码(border法)
1. 实现一个简单的三角形使用CSS盒模型中的border(边框)即可实现如下所示的三角形: CSS实现简单三角形实现原理: 首先来看在为元素添加border时,border的样子:假设有如下代码 ...
css画三角形(怎么用css画三角形)
如何用css3画一个有边框的三角形如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. ...
html css拖拽设计,css绘制三角形和 HTML拖拽事件
利用css制作三角形利用设置边框的三个边的长度和border实现三角形设置,并隐藏其他边例子:#yz3{ display: inline-block; 0; height: 0; border-t ...
CSS——制作三角形
文章目录前言一.上三角形的制作二.右三角形的制作总结前言本文主要介绍如何利用css制作三角形~ 一.上三角形的制作 1.示例图: 2.方法简介: 1.将宽和高设为0,利用border制作合 ...
python打印乘法表口诀-用Python打印九九乘法表正三角和倒三角。
网上看到一道作业,用Python打印九九乘法表正三角和倒三角. 正三角输出: for i in range(1,10): for j in range(1,i+1): if(i==j): print( ...
利用css画三角箭头图标
利用css画三角箭头图标方式单独设置正方形的两条相邻的边框,通过transform的rotate属性值旋转实现箭头图标(注意单位为deg) div {width: 50px;height: 50px ...

利用css构建三角形（正三角，倒三角，左/右三角）

上三角

下三角

左三角

右三角

左上三角

右上三角

左下三角

右下三角

利用css构建三角形（正三角，倒三角，左/右三角）相关推荐

最新文章

热门文章