css实现等边三角形（CVTE笔试题）

港控/mmm° 2021-10-09 04:18 353阅读 0赞

知识点：

transform-origin: 设置基准点，结合transform使用

也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；

没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。

div\{

border-bottom:solid 1px \#030303;

div:before\{

transform-origin: left bottom; //以左边和下边做基准

transform: rotate(30deg);  //顺时针旋转30°

div: after｛

transform-origin: right bottom; //以右边和下边为基准

transform : rotate(60deg);  //顺时针转60°

｝

总 体代码：

.box{
                    border-bottom:solid 1px #030303;
                    width:100px;
                    height:100px;
                    margin: 0 auto;
                    box-sizing: border-box;
                    position: relative;
                }
                .box:before,.box:after{
                    content:"";
                    display: block;
                    width:100px;
                    height:100px;
                    box-sizing: border-box;
                    position: absolute;
                }
                .box:before{
                    border-left:solid 1px #030303;
                    transform-origin: left bottom;
                    transform: rotate(30deg);
                }
                .box:after{
                    border-bottom:solid 1px #030303;
                    transform: rotate(60deg);
                    transform-origin: right bottom;
                }
    
    	</style>
    </head>
    <body>
    	
          <div class='box'>	
    </body>
    </html>

*  transform属性可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素，他有几个属性值参数：
 *  rotate(旋转)允许你通过传递一个度数值来转动一个对象；
 *  scale是一个缩放功能，可以让任一元素变的更大。它使用一个或者两个正数和负数以及小数作为参数；当使用一个参数时表示X轴和Y轴的缩放相同；
 *  translate就是基于X和Y 坐标重新定位元素，当使用一个参数时表示X轴和Y轴的参数相同；
 *  skew倾斜（ps中的斜切），参数是度数，当使用一个参数时表示X轴和Y轴的参数相同；
 *  matrix矩阵变换，就是基于X和Y 坐标重新定位元素，它使用6个参数

**下面我们主要来看看其使用规则：**

transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom 。