4(倒三角)

实现倒三角 主要用到 (  border-**(上下左右): 100px solid(实线) transparent(透明);)

css内容:

        .div1 {

            height: 100px;

            width: 0px;

            border-top: 100px solid;

            border-left: 100px solid transparent;

            border-right: 100px solid transparent;

        }

html:

      <div class="div1"></div>

 

 

效果展示:

                                     

 

旋转的使用样式:

<div class="div2"></div>

 

 .div2 {

            height: 50px;

            width: 50px;

            border-top: 10px solid red;

            border-right: 10px solid;

            transform: rotate(45deg);

        }