前端练习十：形状示例

在元素宽高相同的情况下，border-radius 的某个值设置为 =50% 或者 >50% 效果是相同的。如果元素是宽高不等的矩形，那么 =50% 和 >50% 的效果将有所不同。

border-radius: 10px 是 border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px 的简写。/ 前指定的是水平方向的圆角半径，/ 后指定的是垂直方向上的圆角半径。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .container {
              margin: 32px auto;
              display: flex;
              flex-flow: row nowrap;
              justify-content: space-around;
            }

            .example {
              width: 120px;
              height: 120px;
              
              background-color: #FB3;
            }

            .example1 {
              border-radius: 50% / 100% 100% 0 0;
            }

            .example2 {
              border-radius: 50% / 0 0 100% 100%;
            }

            .example3 {
              border-radius: 100% 0 0 100% / 50%;
            }

            .example4 {
              border-radius: 0 100% 100% 0 / 50%;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="example example1"></div>
            <div class="example example2"></div>
            <div class="example example3"></div>
            <div class="example example4"></div>
        </div>
    </body>
</html>

2.平行四边形

如果为元素本身设置 skew 变形，那么元素的文字也会变形。所以可以为元素的伪元素设置变形。

伪元素设置背景之后将覆盖元素本身，所以需要为其设置 z-index: -1，让其处于元素下一层。

如果元素高度和宽度相等，那么可以对伪元素使用 rotate，从而制造一个菱形。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
              position: relative;
              
              display: inline-block;
              margin: 32px;
              padding: 1em;
              
              color: #fff;
            }

            div::before {
              content: '';
              position: absolute;
              top: 0; 
              right: 0;
              bottom: 0;
              left: 0;
              
              background: #58a;
              
              z-index: -1;
              
            }

            .parallelogram::before {
              transform: skew(-25deg);
            }

            .diamond {
              width: 64px;
              height: 64px;
              text-align: center;
              line-height: 64px;
            }

            .diamond::before {
              transform: rotate(45deg);
            }
        </style>
    </head>
    <body>
        <div class="parallelogram">Be quiet!</div>
        <div class="diamond">Diamond</div>
    </body>
</html>

使用 skew 让 div 标签旋转 45 度形成菱形，然后让图片标签往相反的方向旋转 45 度，从而保持图片元素的正常水平状态。

为了保持图片能够充满整个元素，需要将图片宽度设置为 √2 * 元素宽度。有两种方法可以改变图片的大小，一种是改变图片的 width，另一种是使用 scale 缩放。

使用 scale 有两个好处。第一个好处就是可以保持 width 为 100% 不变，当浏览器不支持 rotate 属性的时候，仍然能有一个好的布局。第二个好处是，由于 transform-origin 的默认值是 50% 50%, 所以我们不需要任何额外的操作就可以使得图片的中点与容器元素的中点保持一致。如果使用 width，那么图片将以左上角为原点进行缩放，所以需要再为图片设置负边距以保持与容器元素中心点一致。

由于 √2 约等于 1.41，所以我们可以指定缩放比例 >=1.42。而且这种情况是建立在图片是正方形的情况下，如果图片不是一个正方形，那就无法生成一个菱形了，除非根据图片再放大缩放比例。这也是这种方式的一种缺陷。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .diamond {
              width: 160px;
              margin: 46px auto;
              
              transform: rotate(45deg);
              overflow: hidden;
            }

            .diamond img {
              width: 100%;
              transform: rotate(-45deg) scale(1.5);
            }
        </style>
    </head>
    <body>
        <div class="diamond">
            <img src="smile.jpeg" />
        </div>
    </body>
</html>

4.切角效果

利用 background-image 属性为元素设置四个背景，利用 background-position 让每个元素处于一个不同的角落，利用 background-size 让每一个背景占据 1/4 的空间位置，使用 background-repeat 禁止每个背景的平铺行为。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                width: 320px;
                padding: 32px;
                margin: 32px auto;
                line-height: 1.5;
                background: #58a;
                background: 
                linear-gradient(135deg, transparent 16px, #58a 0) left top,
                linear-gradient(-135deg, transparent 16px, #58a 0) right top,
                linear-gradient(-45deg, transparent 16px, #58a 0) right bottom,
                linear-gradient(45deg, transparent 16px, #58a 0) left bottom;
                background-size: 50% 50%;
                background-repeat: no-repeat;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div> When you arise in the morning, think of what a precious privilege it is to be alive – to breathe, to think, to enjoy and to love.</div>
    </body>
</html>

示例2：

只需要将切角效果中使用的 linear-gradient 改成 radial-gradient 就可以实现弧角效果。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                width: 320px;
                padding: 32px;
                margin: 32px auto;
                line-height: 1.5;
                background: #58a;
                background: 
                    radial-gradient(circle at top left, transparent 16px, #58a 0) left top,
                    radial-gradient(circle at top right, transparent 16px, #58a 0) right top,
                    radial-gradient(circle at bottom right, transparent 16px, #58a 0) right bottom,
                    radial-gradient(circle at bottom left, transparent 16px, #58a 0) left bottom;
                background-size: 50% 50%;
                background-repeat: no-repeat;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div> When you arise in the morning, think of what a precious privilege it is to be alive – to breathe, to think, to enjoy and to love.</div>
    </body>
</html>

5. 梯形标签页

在 3D 空间内旋转一个矩形，投放到 2D 屏幕上就是一个梯形。如果直接对元素本身进行操作，那么元素上的文字也会因为旋转而变形，所以可以在元素的伪元素上进行旋转操作。在 3D 空间内的元素投放到 2D 屏幕会造成尺寸的变化，所以可以先固定 transform-origin 的值为 bottom，然后再缩放以达到文字垂直居中的效果。

将 transform-origin 设置为 bottom left 和 bottom right 会分别生成一个左梯形和右梯形。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
              position: relative;
              
              margin: 32px;
              display: inline-block;
              padding: 0.8em 1.6em;
              color: #FFF;
            }

            div::before {
              content: '';
              position: absolute;
              top: 0; right: 0; bottom: 0; left: 0;
              
              background: #58a;
              z-index: -1;
              transform: perspective(.5em) rotateX(5deg) scaleY(1.5);
              transform-origin: bottom;
            }
        </style>
    </head>
    <body>
        <div>home</div>
    </body>
</html>

6.简单的饼图

示例1，动画饼图

首先将一个圆形，分成左右两块相等颜色不同的半圆，为元素背景设置渐变可实现这一点。然后用圆形的伪元素遮住右半圆，且伪元素的颜色与左半圆相同，可设置为 inherit。然后只需要旋转伪元素以透露出被遮盖住的右半圆即可实现扇形图效果。

上面这种做法只能实现平分的效果，如果右半圆颜色要遮住左半圆，可以通过改变伪元素的颜色来实现。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .pie {
                width: 100px;
                height: 100px;
                margin: 32px auto;

                border-radius: 100%;
                background: yellowgreen;
                background-image: linear-gradient(to right, transparent 50%, #655 0);
                overflow: hidden;
            }
            .pie::before {
                  content: '';
                  
                  display: block;
                  height: 100%;
                  margin-left: 50%;
                  
                  background-color: inherit;
                  border-radius: 0 100% 100% 0 / 50%;
                  transform-origin: left;
                  transform: rotate(20deg);
                  animation: spin 3s linear infinite,
                             bg 6s step-end infinite;
                }

            @keyframes spin {
              to {
                transform: rotate(180deg);
              }
            }
        </style>
    </head>
    <body>
        <div class="pie"></div>
    </body>
</html>

posted on 2018-12-29 15:20 myworldworld 阅读(198) 评论(0) 收藏举报

刷新页面返回顶部

myworldworld

前端练习十：形状示例

导航

公告