css写一个长方形盒子底部两个角为反圆角
时间: 2023-08-04 15:09:34 浏览: 55
可以使用 CSS 的 border-radius 属性来实现盒子的圆角效果,同时使用 :before 和 :after 伪元素来实现底部的反圆角效果,如下所示:
```css
.box {
width: 200px;
height: 100px;
background-color: #f2f2f2;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative;
}
.box:before,
.box:after {
content: "";
position: absolute;
height: 20px;
bottom: -20px;
background-color: #f2f2f2;
}
.box:before {
left: -10px;
border-bottom-left-radius: 10px;
}
.box:after {
right: -10px;
border-bottom-right-radius: 10px;
}
```
这样就可以实现一个底部两个角为反圆角的长方形盒子。
相关问题
css 写一个正梯形盒子,底部带两个反圆角
可以使用 CSS 的 `transform` 属性来实现正梯形,然后使用 `border-radius` 属性来设置两个反圆角。
HTML 代码:
```html
<div class="trapezoid"></div>
```
CSS 代码:
```css
.trapezoid {
width: 200px;
height: 0;
border-bottom: 100px solid #333; /* 底边 */
border-left: 50px solid transparent; /* 左侧斜边 */
border-right: 50px solid transparent; /* 右侧斜边 */
transform: skew(-20deg); /* 将元素倾斜 20 度 */
border-bottom-left-radius: 20px; /* 左下反圆角 */
border-bottom-right-radius: 20px; /* 右下反圆角 */
}
```
解释一下上述代码:
1. 设置元素的宽度为 200px,高度为 0,通过设置 `border-bottom` 属性实现元素的底边;
2. 通过设置 `border-left` 和 `border-right` 属性实现元素的左右斜边;
3. 使用 `transform` 属性将元素倾斜 20 度,实现正梯形效果;
4. 使用 `border-bottom-left-radius` 和 `border-bottom-right-radius` 属性设置左下和右下反圆角。
css写一个反圆角的盒子
可以通过使用伪元素 `::before` 和 `::after` 来实现反圆角的盒子。具体实现方法如下:
```css
.box {
position: relative;
width: 200px;
height: 100px;
background-color: #ccc;
overflow: hidden;
}
.box::before,
.box::after {
content: "";
position: absolute;
background-color: #fff;
}
.box::before {
left: -20px;
top: 0;
width: 40px;
height: 100%;
border-radius: 0 20px 20px 0;
}
.box::after {
right: -20px;
top: 0;
width: 40px;
height: 100%;
border-radius: 20px 0 0 20px;
}
```
上述代码中,我们通过设置 `.box` 盒子的 `overflow` 属性为 `hidden`,来隐藏伪元素的溢出部分,从而实现反圆角的效果。同时,我们使用伪元素 `::before` 和 `::after` 来分别创建左侧和右侧的反圆角部分,通过设置它们的 `border-radius` 属性来实现反圆角的效果。