在CSS中,我们可以通过使用<border-radius>来定义元素的圆角。如果我们想要一个上面是椭圆下面是方的形状,该怎么做呢?首先,我们需要使用<div&
在CSS中,我们可以通过使用<border-radius>
来定义元素的圆角。如果我们想要一个上面是椭圆下面是方的形状,该怎么做呢?
首先,我们需要使用<div>
标签来创建一个容器,并使用CSS样式来定义它的大小和颜色:
<style> .container { width: 200px; height: 150px; background-color: #f5f5f5; } </style> <div class="container"></div>
现在我们已经创建了一个椭圆形状的容器。接下来,我们需要使用<div>
标签创建一个覆盖在容器上面的元素,并使用<transform>
来将其向下旋转45度:
<style> .container { width: 200px; height: 150px; background-color: #f5f5f5; border-radius: 100px 100px 0 0; } .overlay { position: relative; top: -75px; background-color: #ffffff; width: 200px; height: 75px; transform: rotate(45deg); transform-origin: 0 0; } </style> <div class="container"> <div class="overlay"></div> </div>
现在我们已经成功地创建了一个上面是椭圆下面是方的形状!
粉丝
0
关注
0
收藏
0