CSS应用场景之实现一个三角形、扇形、宽高自适应的正方形、0.5px的线、小于12px的字体

1. 实现一个三角形

.top{
    width: 0;height: 0;
    border-top: 50px solid rgb(101, 150, 255);
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

2.实现一个扇形

.sector{
    width: 0;height: 0;border: 100px solid transparent;border-radius: 50%;
    border-top-color: red;
}

3.实现一个宽高自适应的正方形
vw、vh

.a{
    width: 50%;
    height: 50vw;
    background: red;
}
<div class="a">hello,viewport</div>

padding-bottom

.a{
   width: 100%;
   padding-bottom: 100%;
   height: 0;   
   background: red;
}
<div class="a"></div>

4. 画一条0.5px的线

采用transform: scale()的方式

.link{
    width: 1px;height: 1px;background-color: black;
    transform: scale(0.5,0,5);
}

采用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。viewport只针对于移动端，
只在移动端上才能看到效果 -->

5. 设置小于12px的字体

(1)使用css3的transform缩放属性-webkit-transform:scale(0.5);

.font{ transform:scale(0.5);font-size: 12px; }
<div class="font">哈哈哈哈哈</div>
<label class="font" style="display: block;">哈哈哈哈哈</label>
<!-- 须要将内联元素转换成块元素display: block； -->

(2)使用文字的图片：使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。