CSS 绘制简单简单图形
CSS 还是很强大的,只要你愿意并且有足够创意,你可以利用其组合绘制各种想要的图形。本篇文章主要是CSS绘制简单的几何图形

首先是 HTML 结构:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css shape</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="item"></div>
</body>
</html>
其次,先看一个图形,有助于理解后面的东西:
.item{
    width:0;
    height:0;
    border-top:100px solid #4e4e4e; 
    border-right:100px solid #2abdc1;
    border-bottom:100px solid #bb2f2f;
    border-left:100px solid #5fc783;
}
效果如下:
文章正文图片
可以看到,元素宽度和高度都为 0px;正体形状完全由边框决定。上图用不同颜色以看清各边的分布。加一个边框圆角,就变为了如下形状:
.item{
    width:0;
    height:0;
    border-radius:50%;
    border-top:100px solid #4e4e4e; 
    border-right:100px solid #2abdc1;
    border-bottom:100px solid #bb2f2f;
    border-left:100px solid #5fc783;
}

文章正文图片
看完这两个图,对边框的大概布局就有一个正体了解了。下面就能根据自己的想法随心所欲地绘制了:


三角形:
.item{
    width:0;
    height:0;
        /* 向上的正三角形 */
    border-right:60px solid rgba(255, 255, 255, 0); 
    border-left:60px solid rgba(255, 255, 255, 0); 
    border-bottom:104px solid rgb(245, 144, 144);

    /* 向右的正三角形 */
    /*     
    border-top:60px solid rgba(255, 255, 255, 0); 
    border-left:104px solid rgb(109, 228, 227);
    border-bottom:60px solid rgba(255, 255, 255, 0);
     */

    /* 向下的正三角形 */
    /*
    border-top:104px solid rgb(99, 136, 197); 
    border-left:60px solid rgba(255, 255, 255, 0); 
    border-right:60px solid rgba(255, 255, 255, 0);
    */

    /* 向左的正三角形 */
    /*
    border-top:60px solid rgba(255, 255, 255, 0); 
    border-right:104px solid rgb(222, 88, 136);
    border-bottom:60px solid rgba(255, 255, 255, 0);
    */
}
效果集合:
文章正文图片
当然,里面的数值完全在于自己的需求,而且这也不是唯一一种画三角形的方法,只是这是用的比较普遍的方法。


梯形
在三角形的基础上简单变化一下就是梯形。
.item{
    width: 100px;   
    height: 0px;
    border-left:80px solid rgba(255, 255, 255, 0);
    border-bottom:80px solid #69dcc1;  /*控制高*/
    border-right:80px solid rgba(255, 255, 255, 0);

    /* 直角梯形 1 */
    /*
    border-bottom:80px solid #69dcc1;  
    border-right:80px solid rgba(255, 255, 255, 0);
    */

    /* 直角梯形 2 */
    /*
    border-left:80px solid rgba(255, 255, 255, 0);
    border-bottom:80px solid #69dcc1; 
    */
}
效果集合:
文章正文图片

椭圆
.item{
    width:0;
    height:0;
    /* 水平的椭圆 */
    border-radius:50%;
    border-right:80px solid rgb(118, 152, 208); 
    border-left:80px solid rgb(118, 152, 208);
    border-bottom:80px solid rgba(255, 255, 255, 0);

    /* 竖直的椭圆 */
    /*
    border-radius:50%;
    border-top:80px solid rgb(118, 152, 208); 
    border-left:80px solid rgba(255, 255, 255, 0);
    border-bottom:80px solid rgb(118, 152, 208);
    */
}
效果合集:
文章正文图片
同样,方法不限,你完全可以借助旋转得到各种偏角的椭圆。


对话框
上面只是简单的属性设置,如果结合 :after 和 :before选择器,还能设计出更多的图像。
.item{
    width:0;
    height:0;
    border-radius:50%;
    position:relative;
    border-right:80px solid rgb(118, 152, 208); 
    border-left:80px solid rgb(118, 152, 208);
    border-bottom:80px solid rgba(255, 255, 255, 0);
}

.item:before{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-right:10px solid rgba(255, 255, 255, 0); 
    border-left:20px solid rgba(255, 255, 255, 0);
    border-bottom:50px solid rgb(118, 152, 208);
    transform:rotate(-130deg);
    left:-70px;
    top:50px;
    
    /* 指向右 */
    /*
    transform:rotate(130deg);
    left:35px;
    top:46px;
    */
}

.item:after{
    content:"Hello world!";
    position:absolute;
    top:15px;
    left:-60px;
    width:120px;
    height:50px;
    line-height:50px;
    text-align:center;
    font-weight:bolder;
    color:white;
}
效果合集:
文章正文图片

月牙
.item{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 15px 15px 0 #FFEB3B;
    /*
    box-shadow: 20px 20px 0 #ffeb3b;

    box-shadow: 25px 25px 0 #ffeb3b;

    box-shadow: 30px 30px 0 #ffeb3b;
    */
}
效果集合:
文章正文图片

借助可以设置多个阴影的特性,还能这样做:
.item{
    width: 10px;   
    height: 10px;
    background-color:rgb(139, 105, 241);
    box-shadow:  0px  11px 0 #8c6af1,
               -11px  11px 0 #8b69f1, 
               -11px -11px 0 #8b69f1, 
                 0px -11px 0 #8b69f1, 
                11px   0px 0 #8b69f1, 

               50px 61px 0 #8b69f1, 
               39px 61px 0 #8b69f1, 
               39px 72px 0 #8b69f1, 
               61px 61px 0 #8b69f1, 
               61px 72px 0 #8b69f1, 
               50px 50px 0 #8b69f1, 
               
               50px 20px 0 #ff2727;
}
效果:
文章正文图片


总结
CSS 很强大,如果你有精力有耐心的话可以做出很多复杂精美的东西,但有的时候还得考虑效率和需求,CSS 作图还有不少局限性。正真需要类似的图形的时候,某些手段更为强大且方便,如SVG等。

【原创内容,转载请注明出处】
It's
欢迎访问本站,欢迎留言、分享、点赞。愿您阅读愉快!
*转载请注明出处,严禁非法转载。
https://www.devsong.org
QQ留言 邮箱留言
头像
引用:
取消回复
提交
涂鸦
涂鸦
热门