CSS基础-如何用border写三角形？

pepperwang 发布于2019-08-02 10:04 / 833人阅读

摘要：常用的的单值属性指的是边框。注意边框交替处为斜边，是个梯形，用此属性写三角形开始用边框写三角形，先将梯形变成三角形。下三角效果标签设置成向下三角形透明

1.常用的border的单值属性（border指的是边框。）

/*边框样式属性*/
border-style: solid;
/*边框颜色*/
border-color: #06a43a;
/*边框宽度*/
border-width: 10px;

其中border-style的属性值有三种：
solid（实线），dashed（虚线为方块），dotted(虚线为圆点)
border-style的属性值-效果图

其中颜色，宽度，样式属性值有四个方向。根据值的不同，对应的方向不同
点击查看详情

 border-width:
           四个值：上（10px）右（20px） 下（30px） 左（40px）
           border-width: 10px 20px 30px 40px;

           三个值：上（10px）右（20px） 下（30px） 左（20px）
           border-width: 10px 20px 30px ;

           两个值：上（10px）右（20px） 下（10px） 左（20px）
           border-width: 10px 20px ;

           一个值：上下左右全是10px;
           border-width: 10px;

2.用border边框写三角行

(1)首先查看边框特性，边框交替的位置是斜线
下面是代码，border边框为梯形，点击查看




    
    border标签 part2

注意：边框交替处为斜边，是个梯形，用此属性写三角形

（2）开始用边框写三角形，先将梯形变成三角形。

1.设置宽高为0
2.给border-width设置值.
3.边框设置颜色

梯形转化为三角形




    
    border标签 part2

（3）向下三角形

 1.设置div高宽为0
 2.设置border-width值
 3.其余三条边为transparent（透明），视觉效果为下三角。

下三角效果




    
    border标签 part2

服务器托管云服务器如何用css 如何用java写图表如何用python写爬虫如何用linux写c

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52108.html

CSS基础-如何用border写三角形？

摘要：常用的的单值属性指的是边框。注意边框交替处为斜边，是个梯形，用此属性写三角形开始用边框写三角形，先将梯形变成三角形。下三角效果标签设置成向下三角形透明 1.常用的border的单值属性（border指的是边框。） /*边框样式属性*/ border-style: solid; /*边框颜色*/ border-color: #06a43a; /*边框宽度*/ border-width: ...

ygyooo 2019-08-30 14:19 评论0 收藏0
CSS基础-如何用border写三角形？

摘要：常用的的单值属性指的是边框。注意边框交替处为斜边，是个梯形，用此属性写三角形开始用边框写三角形，先将梯形变成三角形。下三角效果标签设置成向下三角形透明 1.常用的border的单值属性（border指的是边框。） /*边框样式属性*/ border-style: solid; /*边框颜色*/ border-color: #06a43a; /*边框宽度*/ border-width: ...

hosition 2019-08-05 13:26 评论0 收藏0
如何用css画三角形

摘要：那问题来了，如何用来画三角形呢别着急，先来看看我所遇到过的三角形。如下图，有实心三角形，空心的，还有可以归为三角形的小箭头。画一个三角形，首先想到的是如何画三角形的形状，然后给一个背景颜色。在设计稿中，经常会出现好多三角形，如果将三角形变成图片，通过img标签的src或者background中的url来访问，从前端性能方面来看这并不好。那问题来了，如何用css来画三角形呢？别着急，先...

Yuqi 2019-08-30 13:06 评论0 收藏0
CSS3常见技巧（二）：如何用CSS3来实现三角形？

摘要：站长博客如何使用来画一个三角形经常令人非常感到困惑，其实原理上是宽度相等的边距以度来连接。代码如下实现效果如图站长博客：https://www.pipipi.net/ 如何使用CSS3来画一个三角形经常令人非常感到困惑，其实原理上是宽度相等的边距以45度来连接。首先看第一个图showImg(https://segmentfault.com/img/bVbn3xN?w=576&h=3...

Jonathan Shieber 2019-08-30 15:55 评论0 收藏0
CSS3常见技巧（二）：如何用CSS3来实现三角形？

摘要：站长博客如何使用来画一个三角形经常令人非常感到困惑，其实原理上是宽度相等的边距以度来连接。代码如下实现效果如图站长博客：https://www.pipipi.net/ 如何使用CSS3来画一个三角形经常令人非常感到困惑，其实原理上是宽度相等的边距以45度来连接。首先看第一个图showImg(https://segmentfault.com/img/bVbn3xN?w=576&h=3...

dantezhao 2019-08-02 14:12 评论0 收藏0