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

最新推荐文章于 2024-04-10 18:17:09 发布

夏天的风欧阳冰嫣

最新推荐文章于 2024-04-10 18:17:09 发布

阅读量1.4k

点赞数 2

分类专栏： css 前端开发文章标签： css 前端开发

本文链接：https://blog.csdn.net/wenjiusui8083/article/details/79560203

版权

前端开发同时被 2 个专栏收录

59 篇文章 2 订阅

订阅专栏

css

5 篇文章 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 。

语法：-moz-transform-origin: [ | | left | center | right ][ | | top | center | bottom ] ?
transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数 ;
top left | left top 等价于 0 0；
top | top center | center top 等价于 50% 0
right top | top right 等价于 100% 0
left | left center | center left 等价于 0 50%
center | center center 等价于 50% 50%（默认值）
right | right center | center right 等价于 100% 50%
bottom left | left bottom 等价于 0 100%
bottom | bottom center | center bottom 等价于 50% 100%
bottom right | right bottom 等价于 100% 100%