首页
未解之谜
天体物理
科技前沿
下载中心
游戏天地
[FW:AdTitle]
首页 >> 科技前沿 >> 正文

如何使用纯CSS制作基本和高级形状2021-11-24|阅读:21 次|出处:内西.穆里亚报道|编辑:管理员

  • 想要在网页中添加正方形或矩形?以下是使用CSS执行此操作的方法以及更多方法。

    你有没有见过一个纯CSS网站,其中每个元素都是通过CSS完成的?CSS 的作用不仅仅是样式元素。CSS 形状允许 Web 设计人员创建自定义路径,如三角形、圆形、多边形等。这样,您就不再受限于插入具有透明背景的浮动图像,只会对它周围的矩形框感到失望。

    在本文中,我们将使用 CSS 形状和一些函数值来编写不同的形状。

    绘制基本 CSS 形状

    让我们从基本形状开始,如正方形、矩形、三角形、圆形和椭圆。

    正方形和矩形

    正方形和矩形是在 CSS 中最简单的形状。您需要做的就是创建一个<div>并给它一个高度和宽度。

    断续器

    <body>
       <div class="rec-sq">
         <div class="square"></div>
         <div class="rectangle"></div>
       </div>
     </body>

    断续器

    .rec-sq {
     display: flex;
     gap: 2em;
     margin: 2em;
    }
    .square {
     width: 15rem;
     height: 15rem;
     background: rgb(255, 123, 0);
    }
    .rectangle {
     width: 24rem;
     height: 14rem;
     background: rgb(0, 119, 128);
    }

    输出:

    圆和椭圆

    你只需要为一个正方形分配一个50%的边界半径,你就会得到一个圆圈。对矩形执行相同的操作以获得椭圆。

    断续器

    <div class="rec-sq">
         <div class="circle"></div>
         <div class="ellipse"></div>
    </div>

    断续器

    .circle {
     width: 15rem;
     height: 15rem;
     background: rgb(255, 123, 0);
     border-radius: 50%;
    }
    .ellipse {
     width: 24rem;
     height: 14rem;
     background: rgb(0, 119, 128);
     border-radius: 50%;
    }

    输出:

    三角形

    我们将使用边框来创建三角形。想知道它是如何工作的吗?您需要做的就是将三角形的宽度和高度设置为零。这意味着,向前移动,元素的实际宽度将是边框的宽度。此外,您可能已经知道边界边缘彼此对角线为 45 度。为每个边框指定不同的颜色,并将其中的任何三个设置为透明。最终,你会有你的三角形。

    断续器

    <body>
       <div class="sample"></div>
       <div class="triangle"></div>
     </body>

    断续器

    //common to all
    body {
     display: flex;
     gap: 5em;
     margin: 15em;
    }.sample {
     height: 8.5em;
     width: 8.5em;
     border-top: 1em solid #9ee780;
     border-right: 1em solid rgb(240, 241, 141);
     border-bottom: 1em solid rgb(145, 236, 252);
     border-left: 1em solid rgb(248, 115, 106);
    }.triangle {
     height: 0;
     width: 0;
     border-top: 5em solid #9ee780;
     border-right: 5em solid rgb(240, 241, 141);
     border-bottom: 5em solid rgb(145, 236, 252);
     border-left: 5em solid rgb(248, 115, 106);
    }

    输出:

    您可以尝试使用高度和边框颜色来获得不同类型的三角形。例如,您可以创建一个指向向上方向的三角形,方法是在所有其他边框设置为透明时为底部边框为纯色。此外,还可以通过调整边框宽度和边框颜色来创建指向正确方向的三角形或直角三角形。

    断续器

    <body>
       <div class="triangle-up"></div>
       <div class="triangle-right"></div>
       <div class="triangle-bottom-right"></div>
    
    </body>

    断续器

    .triangle-up {
     height: 0;
     width: 0;
     border-top: 5em solid transparent;
     border-right: 5em solid transparent;
     border-bottom: 5em solid rgb(145, 236, 252);
     border-left: 5em solid transparent;
    }
    .triangle-right {
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 4em 0 4em 8em;
     border-color: transparent transparent transparent rgb(245, 149, 221);
    }
    .triangle-bottom-right {
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 8em 0 0 8em;
     border-color: transparent transparent transparent rgb(151, 235, 158);
    }

    输出:

    使用 CSS 创建高级形状

    您可以使用::before和::after 伪元素来创建高级形状。通过智能地使用位置和变换属性,您可以使用纯 CSS 轻松构建复杂的形状。

    星形(5 分)

    您需要使用转换的旋转值来操作边框。这个想法是使用class="star"创建两条边,另外两条边使用::after元素,最后一边使用::before元素。

    断续器

    <div class="star-five"></div>

    断续器

    .star-five {
     margin: 3.125em 0;
     position: relative;
     display: block;
     width: 0em;
     height: 0em;
     border-right: 6.25em solid transparent;
     border-bottom: 4.3em solid rgb(255, 174, 81);
     border-left: 6.25em solid transparent;
     transform: rotate(35deg);
    }
    .star-five:before {
     border-bottom: 5em solid rgb(255, 174, 81);
     border-left: 2em solid transparent;
     border-right: 1.875em solid transparent;
     position: absolute;
     height: 0;
     width: 0;
     top: -45px;
     left: -65px;
     display: block;
     content: '';
     transform: rotate(-35deg);
    }
    .star-five:after {
     position: absolute;
     display: block;
     top: 3px;
     left: -105px;
     width: 0;
     height: 0;
     border-right: 6.25em solid transparent;
     border-bottom: 4.3em solid rgb(255, 174, 81);
     border-left: 5.95em solid transparent;
     transform: rotate(-70deg);
     content: '';
    }

    输出:

    五角大楼

    您可以通过组合梯形和三角形来创建五边形。使用边框和位置属性来塑造和分组它们。

    断续器

    <div class="pentagon"></div>

    断续器

    .pentagon {
     position: relative;
     width: 10em;
     box-sizing: content-box;
     border-width: 10em 5em 0;
     border-style: solid;
     border-color: rgb(7, 185, 255) transparent;
     
    margin-top: 20rem;
    margin-left: 10rem;
    }
    
    .pentagon:before {
     content: "";
     position: absolute;
     height: 0;
     width: 0;
     top: -18em;
     left: -5em;
     border-width: 0 10em 8em;
     border-style: solid;
     border-color: transparent transparent rgb(7, 185, 255);
    }

    输出:

    钻石

    使用位置对指向上方和向下的两个三角形进行分组,以创建菱形。是的,我们将使用边框属性来创建这些三角形。

    断续器

    <div class="diamond"></div>

    断续器

    .diamond {
     width: 0;
     height: 0;
     position: relative;
     top: -3em;
     border: 3em solid transparent;
     border-bottom-color: rgb(129, 230, 255);
    
    }
    .diamond:after {
     content: '';
     width: 0;
     height: 0;
     position: absolute;
     left: -3em;
     top: 3em;
     border: 3em solid transparent;
     border-top-color: rgb(129, 230, 255);
    }

    输出:

    您可以通过更改顶部三角形的高度来创建菱形盾牌形状,如下所示:

    断续器

    <div class="diamond-shield"></div>

    断续器

    .diamond-shield
    {
     width: 0;
     height: 0;
     border: 3em solid transparent;
     border-bottom: 1.25em solid rgb(71, 194, 231);
     position: relative;
     top: -3em;
    }
    .diamond-cut:after {
     content: '';
     position: absolute;
     left: -3em;
     top: 1.25em;
     width: 0;
     height: 0;
     border: 3em solid transparent;
     border-top: 4.4em solid rgb(71, 194, 231);
    }

    输出:

    心形有点难,但你可以通过使用::before和::after伪元素来做到这一点。您可以使用不同的变换值从不同的角度旋转它们,直到它们完美地形成心形。最终,您可以设置变换原点以设置应用变换的点。

    断续器

    <div class="heart"></div>

    断续器

    .heart {
     width: 6.25em;
     height: 55em;
     position: relative;
    }
    .heart:before,
    .heart:after {
     content: "";
     width: 3em;
     height: 5em;
     position: absolute;
     left: 3em;
     top: 0;
     background: red;
     border-radius: 3em 3em 0 0;
     transform: rotate(-45deg);
     transform-origin: 0 100%;
    }
    .heart:after {
     left: 0;
     transform: rotate(45deg);
     transform-origin: 100% 100%;
    }

    输出:

    试验纯 CSS 形状

    您现在应该熟悉可以通过编写几行代码来构建的不同纯CSS图像。构建一个超快的网站不再是一项繁忙的任务,因为您知道如何处理代码。最好的部分是,您可以通过根据您的要求操纵不同的形状和颜色来与品牌的声音产生共鸣。因此,请继续尝试并发现纯粹通过CSS绘制真棒形状的新方法。


免责声明:本文所提供的信息(包括图片、文字、视频等)内容均来源于网络,只供参考之用,不代表本站观点。如有侵权、违规,请联系我们删除。
上一条:如何更改您的 Apple ID 电子邮件地址下一条:没有了!
今日推荐
一周阅读排行
Copyright © 2017-2020 怪里咕咚 All Rights Reserved
滇ICP备17000807号-2
访问量: