弹性布局和实现多边形以及等比缩放

首先看效果图

PC端效果：

image.png

手机端【ios6/7/8/x】效果：

image.png

iPad上的效果图：

image.png

iPad Pro上的效果图：

image.png

直接上代码

html

<div class="content_bottom_serve"> 
      <div class="content_title">服务品质</div>
      <div class="content_gradual">
        <div class="gradual"></div>
      </div>
      <div class="content_subhead">不同的媒介，拥有同样的精彩</div>
      <div class="content_conter">
        <div class="list">
　　　　　　<div class="list_child">
　　　　　　　　<div class="list_child_child"></div>
　　　　　　</div>
　　　　</div>
      </div>
      <div class="content_conter">
        <div class="list">
　　　　　　<div class="list_child">
　　　　　　　　<div class="list_child_child"></div>
　　　　　　</div>
　　　　</div>
      </div>
      <div class="content_conter">
        <div class="list">
　　　　　　<div class="list_child">
　　　　　　　　<div class="list_child_child"></div>
　　　　　　</div>
　　　　</div>
      </div>
    </div>

css

.content_bottom_serve {
    width: 100%;
    height: 26vw;
    border: 1px solid red;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.content_title {
    width: 100%;
    height: 5.3vw;
    font-size: 1.6vw;
    text-align: center;
    line-height: 5.3vw;
    /* border: 1px solid gold; */
}

.content_gradual {
    width: 100%;
}

.gradual {
    width: 13%;
    height: 0.104vw;
    line-height: 5.3vw;
    margin: 0 auto;
    background: linear-gradient( to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(242, 157, 157, 0.3) 20%, rgba(242, 157, 157, 0.4) 30%, rgba(242, 157, 157, 0.5) 40%, rgba(242, 157, 157, 0.8) 50%, rgba(242, 157, 157, 0.5) 60%, rgba(242, 157, 157, 0.4) 70%, rgba(242, 157, 157, 0.3) 80%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
}

.content_subhead {
    width: 100%;
    height: 3vw;
    font-size: 1.25vw;
    text-align: center;
    color: #727272;
    line-height: 3vw;
    /* border: 1px solid rgb(223, 15, 136); */
}

.content_conter {
    width: 20%;
    height: 17vw;
    border: 1px dashed indianred;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 多边形 */

.list {
    width: 17.5vw;
    height: 17.5vw;
    overflow: hidden;
    transform: rotate(150deg);
}

.list_child {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: rotate(-60deg);
}

.list_child_child {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: rotate(-60deg);
    background-color: red;
}

注意：我这里使用了flex布局整个样式看起来效果比较好，想要改变多边形，只需要调整list里的宽高方可。主要的是等比例缩放，我这里宽高使用的都是vw，这个很重要，如果使用px，em，rem等都不会达到适配。具体px和vw怎么换算，我这里用的就是?px/19.2=?vw，具体参考这个图

493c4606555a7966ba3f5773bddbc4e.png

感谢大家一直对我支持，后续有更多丰富的内容呈上