左上右下圆角
时间: 2024-02-24 22:59:49 浏览: 122
显示圆角图片
要设置左上和右下两个角为圆角,可以使用 CSS 的 border-radius 属性,同时指定左上角和右下角的半径大小即可。
以下是一个示例代码,将热销小图标设置左上和右下两个角为圆角:
HTML:
```
<div class="hot-sale"></div>
```
CSS:
```
.hot-sale {
width: 50px;
height: 50px;
background-color: red;
animation: hotSale 1s infinite;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
```
这段代码将会让热销小图标左上和右下两个角设置为半径为 10px 的圆角。如果还想要设置其他角的圆角,可以继续使用 border-*-radius 属性,例如:
```
border-top-right-radius: 20px;
border-bottom-left-radius: 5px;
```
这将会设置元素的右上角半径为 20px,左下角半径为 5px,从而形成一个不规则的圆角矩形。
阅读全文