css3绘制半圆、三角形等图形

WebGirl
457 阅读3分钟

css3 绘制半圆的方法

方法1

利用border-radius属性实现，只需要将相邻两个角的值设置为宽/高度的一半，另两个角设置为0即可。

每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        .clearfix {
            zoom: 1;
            /*为IE6，7的兼容性设置*/
        }


        .clearfix:after {
            content: '.';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }


        ul li {
            list-style: none;
            float: left;
            margin: 50px 0 50px 20px;
            text-align: center;
        }


        li {
            background: red;
        }


        h2 {
            margin-top: 20px;
        }

        .circle1 {
            width: 100px;
            height: 50px;
            border-radius: 50px 50px 0 0;
            line-height: 50px;
        }


        .circle2 {
            width: 50px;
            height: 100px;
            border-radius: 0 50px 50px 0;
            line-height: 100px;
        }


        .circle3 {
            width: 100px;
            height: 50px;
            border-radius: 0 0px 50px 50px;
            line-height: 50px;
        }


        .circle4 {
            width: 50px;
            height: 100px;
            border-radius: 50px 0 0 50px;
            line-height: 100px;
        }


        .circle5 {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div>
        <h2>用border-radius实现半圆</h2>
        <ul>
            <li class="circle1">上边圆</li>
            <li class="circle2">左边圆</li>
            <li class="circle3">下边圆</li>
            <li class="circle4">左边圆</li>
            <li class="circle5">全圆</li>
        </ul>
    </div>
</body>

</html>

方法2

利用css3的clip属性和rect()函数来实现。

clip 属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。唯一合法的形状值是：rect (top, right, bottom, left)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        .clearfix {
            zoom: 1;
            /*为IE6，7的兼容性设置*/
        }

        ul li {
            list-style: none;
            float: left;
            margin: 50px 0 50px 20px;
            text-align: center;
        }

        li {
            background: red;
        }

        h2 {
            margin-top: 20px;
        }

        .demo {
            /*左半圆*/
            position: absolute;
            /*clip 属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。*/
            width: 100px;
            height: 100px;
            border-radius: 50px;
            /* line-height: 50px; */
            clip: rect(0px 50px 100px 0px);

            /* 上半圆 */
            /* clip: rect(0px 100px 50px 0px); */
            /* 下半圆 */
            /* clip: rect(50px 100px 100px 0px); */

            /* 左上1/4圆 */
            /* clip: rect(0px 50px 50px 0px); */
            /*唯一合法的形状值是：rect (top, right, bottom, left)*/
        }

        .right-circle {
            /*右半圆*/
            left: 200px;
            clip: rect(0px 100px 100px 50px);
            /*唯一合法的形状值是：rect (top, right, bottom, left)*/
        }
    </style>
</head>

<body>
    <div>
        <h2>css3的clip 方法剪裁实现半圆</h2>
        <p style="color: red;"></p>
        <ul style="position: relative;">
            <li class="demo">左半圆</li>
            <li class="demo right-circle">右半圆</li>
            <li></li>
        </ul>
    </div>
</body>
</html>

CSS3用border绘制三角形

我们给元素设置border的时候，会有上、下、左、右四个边框线，如果我们把元素本身宽高设为0，四个边框分别设置比较宽的不同的颜色，会怎么样？我们尝试下。代码：

.arrow{
  width:0;
  height: 0;
  border-bottom: 100px solid #333;
  border-top: 100px solid red;
  border-right: 100px solid blue;
  border-left: 100px solid green;
}

image.png

可以看到，四条边框交叉后，正好分割成四个三角形，我们只需要去掉我们不需要的，就可以创建一个三角形。
比如，我们想要左侧的三角形，我们可以让右侧的边框隐藏，然后把上下边框的一半使用transparent让其透明。这样可以显示一个三角形出来：

思路：

不写元素的宽高，使用border-width撑起元素内容大小，如果哪边是斜线就是border-left: 50px solid transparent，实线边：border-bottom: 100px solid red

image.png

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

image.png

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

image.png

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

image.png

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

image.png

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

image.png

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}

image.png

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

image.png

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

画一条0.5px的直线

方法1

移动端，采用meta viewport的方式

<meta name="viewport" 
      content="width=device-width, 
      initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。

方法2

采用 transform: scale()的方式

transform: scale(0.5,0.5);

方法3

使用boxshadow

<style>
.boxshadow {
    height: 1px;
    background: none;
    box-shadow: 0 0.5px 0 #000;
}
</style>
<p>box-shadow: 0 0.5px 0 #000</p>

<div class="boxshadow"></div>

设置box-shadow的第二个参数为0.5px，表示阴影垂直方向的偏移为0.5px。

方法4

使用background-image结合SVG的方式

使用svg的line元素画线，stroke表示描边颜色，默认描边宽度stroke-width=“1”，由于svg的描边等属性的1px是物理像素的1px，相当于高清屏的0.5px，

这样在Chrome在能很好的显示，但在firefox挂了，究其原因是因为firefox的background-image如果是svg的话只支持命名的颜色，如"black"、"red"等，如果把上面代码的svg里面的#000改成black的话就可以显示出来，但是这样就很不灵活了。因此，只能把svg转成base64的形式，最终如下：

.hr.svg {
    background: url("data:image/svg+xml;utf-8,
                    <svg xmlns='http://www.w3.org/2000/svg' 
                    width='100%' height='1px'>
                      <line x1='0' y1='0' x2='100%' y2='0' stroke='#000'>
                      </line>
                    </svg>");
    //使用base64来使得支持firefox
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==");
}
avatar
文章
阅读
粉丝