首页 >

css倒椭圆,css左三角形

css最大标题,css加粗属性值,css中如何水平居中,css grid 阮一峰,dwcs6css命名规则,css中鼠标显示形状,css左三角形

css倒椭圆,css左三角形

.ellips {
width: 200px;
height: 100px;
border-radius: 50% / 100%;
transform: rotate(-45deg);
}

这段CSS代码可以制作一个倒椭圆,它的宽度为200像素,高度为100像素,并且使用了border-radius属性来定义椭圆的形状。其中,border-radius属性的第一个值50%表示水平半径,第二个值100%表示垂直半径。而transform属性的rotate函数则表示将该元素旋转-45度。

如果大家想要制作一个带有文本的倒椭圆按钮,可以使用以下代码:

该按钮的HTML代码使用了一个button标签,并且添加了class为”button ellips”,这样就可以应用上述CSS样式。最终的效果如下:

倒椭圆在网页设计中非常实用,可以让网页特别的协调美观。通过调整其宽高比和旋转角度,可以制作出多样化的形状。


  • 暂无相关文章