怎样用html或css制作三角形
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎样用html或css制作三角形相关的知识，希望对你有一定的参考价值。
只设置border三个方向的值，另一个方向就会汇聚成一个点，就出现三角形了，希望对你有帮助，望采纳！
#triangle-left
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
下面是个示例：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas
border:1px solid #ccc;
margin:0 30%;
</style>
</head>
<body>
<canvas id="myCanvas" width="500px" height="500px"></canvas><!--写一个画布-->
<script>
var c=document.getElementById('myCanvas');//获取一下画布
var ct=c.getContext('2d');//设置2d上下文对象；（你就这么写就行。不需要懂什么意思，主要是看下面）
ct.moveTo(200,50);//从哪个点开始， （左上角是0，0点）
ct.lineTo(50,200);//到坐标是50，200这个点；
ct.lineTo(400,200);//再到400，200这个点；
ct.lineTo(200,50);//再到200，50这个点，也就是开始的点
ct.lineWidth=20;//线条的宽度
ct.strokeStyle='#0080A0'//设置线条的颜色
ct.lineCap='round';//设置端点的样式 ，（这里我设置的是圆角）
ct.stroke();
</script>
</body>
</html>
纯手打，不容易，望采纳；
参考技术B 希望可以帮到楼主，下面是实现的代码：#triangle-up
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
HTML代码：
<div id="trlangle-up></div>
希望我的回答对楼主有帮助，不懂可以继续追问。 参考技术C <div class="triangle_border_up">
<span></span>
</div>.triangle_border_up
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
.triangle_border_up span
display:block;
width:0;
height:0;
border-width:0 28px 28px;
border-style:solid;
border-color:transparent transparent #fc0;/*透明 透明 黄*/
position:absolute;
top:0px;
left:0px;
css制作三角形的原理是啥？
也是初次接触html，在网上找了下教程，但是不明白三角形的原理是什么？
还有border的三要素（border-width、border-color、border-style）又是如何运用的？我看好像有什么border-style：啥啥啥的；←_←
在矩形的直角，两条边的样式要均分
比如左上角 border-top 和 border-left 的样式要均分
如果border-left 无色透明， border-top有色， 就会出来一个45度的锐角追问
网易云课堂那个教程一点基础都不教，什么叫样式和均分……→_→
另外这个我是在网上找的，云课堂教的是，宽高为0，然后三个边框变白……
样式也就是每一条CSS规则
均分原理是为了好记给起的名字
每个box（盒子）都有4条边(border )，而且边都是有宽度的
边可以设置的样式大概有三条 border-width (宽) border-color(颜色) border-style(虚线啊还是点啊还是实线)
而box的角会被两条边的样式作用，因为你不能说左上角只属于左边，不属于上边
所以沿对角线平分，每边各占一个45度的锐角
2.在矩形的直角，两条边的样式要均分，比如左上角 border-top 和 border-left 的样式要均分
如果border-left 无色透明， border-top有色， 就会出来一个45度的锐角。
以上是关于怎样用html或css制作三角形的主要内容，如果未能解决你的问题，请参考以下文章