你记得，但是写不出来的CSScss实现三角形 css实现扇形添加一个border-radius即可超出两行显示省略号

最近面试，一来就让手写css，我还是头一次遇见，一般都是手写js. 我瞬间傻眼所以不得不复习一遍css。唉

css实现三角形

.triangle {
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-bottom-color: rosybrown; 
    border-top: 0px;
}

css实现扇形

在三角形基础上添加一个border-radius即可

 .triangle {
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-bottom-color: rosybrown; 
    border-top: 0px;
    border-radius: 50%;
}

半圆和四分之一圆

半圆实现原理：要画出半圆，只需要将矩形相邻的两个角设置圆角border-raduis属性，这里以右上角和右下角为例：

宽度需要设置为高度的一半
border-raduis表示的是圆角曲线的半径

.half-cirlce {
    width: 50px;
    height: 100px;
    background: brown;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    margin: 100px auto;
}

实现效果：

四分之一圆：

.half-cirlce {
    width: 100px;
    height: 100px;
    background: brown;
    border-bottom-right-radius: 100%;
    margin: 100px auto;
}

效果：

css 实现正六边形

正六边形：边长相等且每个角都是120度
有很多种方式。这里提供一种写法可以利用三个相同的长方形利用rotate旋转得到

这里设定边长为100 那么每个盒子的width是100 通过六边形的特性根据勾股定理可以计算得到每个盒子的height大约等于173

<div class="hexagon">
    <div class="side side-1"></div>
    <div class="side side-2"></div>
    <div class="side side-3"></div>
</div>

.side {
    width: 100px;
    height: 173px;
    background: cadetblue;
    position: absolute;
    transform: 50% 50%;
}
.side-2 {
    transform: rotateZ(60deg);
}
.side-3 {
    transform: rotateZ(-60deg);
}

实现效果：

实现一个饼状图

问这个可真的是难为我小猪佩奇了，一般不都是用echarts吗？既然面试官这样问了，也不能说不会啊为了动态展示百分比这里使用css变量。主要实现原理：

圆形盒子内部，左右两个矩形拼接，
当百分比小于50时左边矩形隐藏右边矩形根据百分比计算旋转角度进行旋转
当百分比大于50时左边矩形旋转右边矩形固定展示
通过opacity的边界值0和1来控制显示和隐藏

<div class="parent" style="--percent: 30">
    <div class="pie pie-left"></div>
    <div class="pie pie-right"></div>
</div>

.parent{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #f0f0f0;
    border: 1px solid black;
    overflow: hidden;
    margin: 100px auto;
    display: flex;
}
.pie{
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
/* 左半圆 用于旋转*/
.pie-left::before, 
/* 右半圆 用于旋转*/
.pie-right::before,
/* 右覆盖圆  大于50的时候 固定显示*/
.pie-right::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: deepskyblue;
}
.pie-left::before{
    left: 100%;
    transform-origin: left;
    transform: rotate(calc(3.6deg * (var(--percent) - 50)));
    /* 小于50时 左边隐藏  9999便于计算得到边界值*/
    opacity: calc(9999 * (var(--percent) - 50));
}
.pie-right::before {
    right: 100%;
    transform-origin: right;
    transform: rotate(calc(3.6deg * var(--percent)));
}
.pie-right::after {
    /* 大于50时 一直显示 */
    opacity: calc(9999 * (var(--percent) - 50));
}

实现效果：

超出两行显示省略号

 .title {
    width: 200px;
    display:-webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

实现移动端0.5px边框

在移动端1px 有些设备看起来会很粗，所以设计会给0.5px, 但是0.5px在ios上显示还好，在安卓上可能会识别成0px。所以通用的解决办法是利用伪元素先整体放大一倍，然后再缩小

 .border {
   width: 200px;
   height: 100px;
   position: relative;
 }
.border::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid red;
    border-radius: 40px;
    transform: scale(0.5);
    transform-origin: 0 0;
}

背景高斯模糊

如果给父元素添加blur，所有子元素都会继承这个样式，所以这里需要将高斯模糊单独生成一个元素

html: 
<body>
    <div class="wrap">
        <div class="filter-bg"></div>
        <div class="content"></div>
    </div>
</body>

css: 
 .wrap {
            width: 400px;
            height: 600px;
            position: relative;
            overflow: hidden;
        }
        .filter-bg {
            width: 100%;
            height: 100%;
            background-image: url('https://t7.baidu.com/it/u=2609096218,1652764947&fm=193&f=GIF');
            background-size: cover;
            filter: blur(20px);
        }
        .content {
            position: absolute;
            left:0;
            top: 100px;
            width: 100%;
            height: 300px;
            background-image: url('https://t7.baidu.com/it/u=2609096218,1652764947&fm=193&f=GIF');
            background-size: contain;
            background-repeat: no-repeat;
        }

效果：

三栏布局

一行最多排列三个元素，元素之间的空隙是10px, 元素的宽度是(屏幕宽度 - 20px)/3 一行两边不留白，多余的个数换行显示。元素的高度是宽度的一半.
高度是宽度的一半：可以利用padding的百分比来实现，当padding设置成百分比的时候，表示按父级元素的宽度大小取百分比，如果父级不存在宽高则依次向上取值，直到取到body（面试的时候把百分比记成了是以自身宽度来取死活没有写出来）

html:
<div class="parent">
        <div class="child">
            <div class="inner">1</div>
        </div>
        <div class="child">
            <div class="inner">2</div>
        </div>
        <div class="child">
            <div class="inner">3</div>
        </div>
        <div class="child">
            <div class="inner">4</div>
        </div>
        <div class="child">
            <div class="inner">5</div>
        </div>
        <div class="child">
            <div class="inner">6</div>
        </div>
    </div>
    
css:
.parent {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: aquamarine;
}
.child {
    width: calc((100% - 20px)/3);
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: antiquewhite;
}
.child:nth-of-type(3n){
    margin-right: 0px;
}
.inner {
    height: 0;
    padding-bottom: 50%;
}

来看一下效果：

页面置灰

当有重大事情发生时，可以看到各大平台页面都是灰色的
一般直接在html标签上添加 filter: grayscale(1) 设置灰色滤镜 grayscale()函数参数表示设置灰色滤镜的程度, filter 是 css3新属性，需要添加浏览器内核兼容

html {
    /*  webkit chrome、safari */
    -webkit-filter: grayscale(100%);
    /*firefox*/
    -moz-filter: grayscale(100%);
    /*ie9*/
    -ms-filter: grayscale(100%);
    /*opera*/
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
     /*ie9- */
    filter: gray;
    /* ie */
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
}

置灰后的页面：

画一轮带阴影的弯月

要使用css画一个月亮很容易，可以直接利用border-raduis先画出一个圆，然后给出一个border-right右边框，但是带上阴影，我们一般会想到box-shadow 但是用这个属性画出的阴影贴合的是圆的形状，而不是圆的右边框，这时候就可以使用filter的drop-shadow函数了，先看一下效果

css实现代码也很简单：

  .moon{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border-right: 20px solid #fff;
            margin: 50px auto;
            filter: 
            drop-shadow(0px 0px 2px #fff)
            drop-shadow(0px 0px 5px #fff)
            drop-shadow(0px 0px 10px #fff)
            drop-shadow(0px 0px 20px #fff)
            ;
        }

波浪线颜色拼接

需要得到的效果：

利用clip-path 的path函数可以实现任意形状的图形 html及css代码

<style>
        .shape {
            width: 240px;
            height: 240px;
            clip-path: path("M 0 120 Q 10 30 40 120 Q 60 160 80 130 Q 90 30 120 120 Q 140 170 160 120 Q 164 30 200 120 Q 220 170 240 120 L 240 240 L 0 240 ");
            background-color: antiquewhite;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
        }
        .wrap {
            width: 240px;
            height: 240px;
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="shape"></div>
    </div>