css画三角形（CSS画三角形、圆形、椭圆形总结）

本文目录

• CSS画三角形、圆形、椭圆形总结
• css无序列表黑点如何换成三角形
• CSS三角形的原理
• 如何用CSS写一个三角形
• 如何使用CSS的border属性画个三角形
• CSS三角形绘制
• 怎么用css控制border成为三角形
• 如何使用HTML&CSS写一个三角形

CSS画三角形、圆形、椭圆形总结

CSS画正方形长方形很简单，本文就不说了。 一、三角形 1、CSS画等腰三角形 2、画直角三角形： 二、画圆形 注意：border-radius是width/height的一半（50%）。 画半圆： 半圆的画法是把高度设为宽度的一半，并且也只设置左上角和右上角的半径，且半径为宽度的一半。 画四分之一圆：是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。 三、画椭圆 斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径。四、平行四边形 margin-left是为了使得平行四边形可以全部在浏览器中显示出来 五、梯形 高度为0。有宽度没高度。六、五边形、六边形

css无序列表黑点如何换成三角形

1、首先创建一个HTML示例文件。2、其次设置一个span元素为块级元素。3、然后分别设置border的四边都为不同的颜色。4、最后通过设置上边框和左右边框宽度实现三角形即可。

CSS三角形的原理

1、当如下设置代码并赋给div相应的属性时：

#sider2{

    width: 100px;

    height: 100px;

    border-top: 30px solid #000;

    border-right: 30px solid #ff0000;

    border-left: 30px solid #00ff00;

    border-bottom: 30px solid #0000ff;

}

会得到如下的一张图：

2、接着当不设置border-bottom，即默认其为0时，可以得到下面的图片；

3、然后当设置其width为0时，如下图：

4、继续设置其height为0；

5、最后假若你把border-left,border-right设置为透明之后，就可以看到如下的三角形了。

6、这就是设置一个基本的三角形所需要的代码，效果也看起来很直观。

7、还有假如是想实现一个直角三角形，则最后需要两个border边的配合使用，浏览器会自动进行一些“拉伸变换”后就可以得到一个直角三角形。

#triangle-topleft {

    width: 0;

    height: 0;

    border-top: 100px solid red;

    border-right: 100px solid transparent;

}

如何用CSS写一个三角形

1.可以用css3的border-radius属性来实现，支持ie9+

《div class="dm"》《/div》《div class="dm1"》《/div》《div class="dm2"》《/div》《div class="dm3"》《/div》《div class="dm4"》《/div》《div class="dm5"》《/div》《div class="dm6"》《/div》《div class="dm7"》《/div》《style》.dm {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 100px solid #00897B;}.dm1{  width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-top: 100px solid #00897B;margin-top: 20px;}.dm2{width: 0;    height: 0;    border-top: 50px solid transparent;    border-right: 100px solid #00897B;    border-bottom: 50px solid transparent;margin-top: 20px;}.dm3{  width: 0;    height: 0;    border-top: 50px solid transparent;    border-left: 100px solid #00897B;    border-bottom: 50px solid transparent;margin-top: 20px;}.dm4{   width: 0;    height: 0;    border-top: 100px solid #00897B;    border-right: 100px solid transparent;margin-top: 20px;}.dm5{ width: 0;    height: 0;    border-top: 100px solid #00897B;    border-left: 100px solid transparent; margin-top: 20px;}.dm6{  width: 0;    height: 0;    border-bottom: 100px solid #00897B;    border-right: 100px solid transparent}.dm7{  width: 0;    height: 0;    border-bottom: 100px solid #00897B;    border-left: 100px solid transparent;}《/style》

如何使用CSS的border属性画个三角形

宽度或高度等于0（取决于朝哪个方向的箭头） ，border只有一条边显示，其他边隐藏，比如

width: 0;height: 0;border: 10px solid transparent;border-top-color: #000;

如果想旋转可以用transform来实现

CSS三角形绘制

当div宽度为0，高度为0的时候，只设置border的大小和四边不同颜色可看到下图，只保留一边的颜色，另外三边的颜色设置为transparent可得到一个方向的三角形。因此，可延伸出设置一边的border的颜色，相邻两边的border设置为transparent可得到一个方向的三角形。 border的大小的值为三角形底边上的高，三角形的底为相邻两边的border的高的和，如下图所示的红色锐角三角形 若想实现直角三角形的效果，如下图所示直角在左上的三角形，按原理可设置上border和左border的颜色，另外两条边的颜色为transparent，此样式可简写为只设置上border的颜色，另一条相邻的右border为transparent 你也许会遇到要画个奇怪三角形的时候，只要参考锐角三角形的方式，找到三角形底边和高，计算出三角形高和把相邻两条边的高相加作为底部，你可以画出各种各样的三角形，如果再加上角度旋转的css，你便啥三角形都能画！ 此类三角形解决思路通常使用两个不同颜色的三角形做颜色叠加，比如做如上图所示的边框为1px的红色边框白色底三角形，就先画一个红色三角形，再画一个尺寸少2px的白色底三角形，然后设置两个三角形的position将三角形重叠，这里使用伪元素实现 1、向上正箭头 2、向下正箭头 3、向左正箭头 4、向右正箭头 5、向左上箭头 6、向右上箭头 7、向左下箭头 8、向右下箭头

怎么用css控制border成为三角形

用css控制border成为三角形可以参考以下的代码：

.a {width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid red;}

扩展资料：

border的css应用

如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。

默认值为：medium none。border-color的默认值将采用文本颜色。

提示和注释

注释：HTML 4.01 不推荐使用图像的 "border" 属性。在 XHTML 1.0 Strict DTD 和 HTML 5 中，不再支持该属性。

提示：请使用 CSS 的边框属性来改变元素的边框样式。您可以在一个外部样式表中使用 CSS 边框属性，为站点上的所有图像设置一致的边框。与单独为一个图像设置 border 属性相比，这种方式无疑拥有更高的效率。

如何使用HTML&CSS写一个三角形

《div style="width:200px; height:174px; -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%); clip-path: polygon(50% 0, 0 100%, 100% 100%); text-align:center; line-height:300px; color:#fff; background-color:red"》等边三角形《/div》《div style="width:200px; height:100px; -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%); clip-path: polygon(50% 0, 0 100%, 100% 100%); text-align:center; line-height:175px; color:#fff; background-color:red"》等腰直角三角形《/div》