左上右下圆角

要设置左上和右下两个角为圆角，可以使用 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，从而形成一个不规则的圆角矩形。

相关问题

css边框左上角圆角

根据引用\[1\]中的描述，如果在设置圆角时只设置了左上、右上和右下三个角的圆角，而没有设置左下角的圆角，浏览器会按照对角线处理。也就是说，左下角的圆角会与右上角的圆角处理方式相同。

如果你想要实现只有左上角有圆角的效果，可以使用以下CSS代码：

.box {
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 50% 0 0 0;
  margin: 50px auto;
}

这样设置后，只有左上角会有圆角，而其他三个角都是直角。

希望这个回答对你有帮助！
#### 引用[.reference_title]
- *1* *3* [【CSS应用篇】——CSS如何实现圆角边框](https://blog.csdn.net/m0_64231944/article/details/127701741)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v4^insert_chatgpt"}} ] [.reference_item]
- *2* [CSS学习（四）—— 边框与圆角](https://blog.csdn.net/qq_43848400/article/details/123265777)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v4^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

设置div左上右上圆角

要设置 div 左上和右上的圆角，可以使用 CSS 中的 border-radius 属性。具体步骤如下：

1. 使用 border-radius 属性设置左上和右上的圆角，其值为圆角的半径。
2. 如果只需要设置部分角的圆角，可以使用 border-top-left-radius 和 border-top-right-radius 属性分别设置左上和右上的圆角。

以下是一个示例代码：

<div class="rounded">
  <p>Some text here.</p>
</div>

.rounded {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  /* 或者使用下面这行代码 */
  /* border-radius: 10px 10px 0 0; */
}

上述代码设置了 div 左上和右上的圆角半径为 10px。如果想要设置所有角的圆角，可以使用 border-radius 属性，其值为四个圆角的半径，按顺序分别为左上、右上、右下、左下。例如：

.rounded {
  border-radius: 10px 20px 30px 40px;
}

这样就可以设置左上、右上、右下、左下四个角的圆角半径分别为 10px、20px、30px、40px 了。