A-A+

用CSS画三角形和平行四边形

2018年11月05日 javascript 暂无评论 阅读 17 views 次

在网页设计中使用图形而非图片可以提高性能,今天来看看如何用CSS画一些简单的三角形和平行四边形。

先来看如何画一个三角形,在画三角形之前,我们看看下面的代码:

<h2>1.triangle basic shape</h2>
<div class="basic_triangle"></div>
.basic_triangle {
    width:50px;
    height:50px;
    border-width:100px 100px 100px 100px;
    border-style:solid;
    border-color:#f9a #f81 #A76 #153;
    margin:20px auto;
}

效果图如下,当把border的width设置的足够大时,四个边框颜色会形成三角形。当我们把白色部分的宽高设置为0的时候,就会有四个三角形,如小图所示。

Capture

基于上面的结果,我们设置对应不要地方的颜色为透明就可以实现各种三角形。

代码如下:

.triangle_up {
    width:0;
    height:0;
    border-width:0px 100px 100px 100px;
    border-style:solid;
    border-color:transparent transparent  #A76 transparent;
    margin:20px auto;
}

20180813175627795

其他各个方向的对应修改。

如果要实现一个梯形,在第一个的基础上直接让color为透明就可以了。

.ladder_shape {
    width:100px;
    height:50px;
    border-width:0px 100px 100px 100px;
    border-style:solid;
    border-color:transparent transparent #f81 transparent;
   
}

如果我们要实现直角三角形,那么可以设置border-width的值为0.

.triangle_right{
    width:0;
    height:0;
    border-width:0px 100px 100px 0px;  //左边要直角,设置左边width为0.
    border-style:solid;
    border-color:transparent transparent  #A76 transparent;
    margin:20px auto;
}

还有一个,平行四边形,我们可以通过CSS的transform属性来进行拉伸,里面的文字内容进行反方向拉伸。代码如下:

<h2>4.right triangle</h2>
<div class='triangle_right'></div>
 
 
 
 
.parall_shape {
    width:100px;
    height:50px;
    background:#153;
    transform:skewX(-50deg);
    margin:20px auto;
}
.parall_shape span{
   width:100px;
   text-align:center;
   display:inline-block;
   line-height:50px;
   verticle-align:middle;
   color:#fff;
   transform:skewX(50deg); /* 使用相反的拉伸让字体不扭曲 */
}

打赏作者
如果文章对您有所帮助请打赏支持本站发展。

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

给我留言

您必须 登录 才能发表留言!

Copyright © 前端技术分享休闲玩耍去处分享-大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: