CSS 边框半径问题

标签 css

<分区>

任何人都可以向我解释如何制作一个圆 Angular 边框的div this image ？

我试过了，但结果不一样:左右侧曲线应该没那么硬。

这是我的代码片段:

.cnt {
  margin: 0 auto;
  border: 1px solid grey;
  width: 300px;
  height: 150px;
  position: relative;
  background-color: #4a4d84;
}

.t {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: red;
  bottom: 0;
}

.t::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 70px;
  top:-30px;
  background-color: red;
  border-radius: 50% 50% 0 0;
}

<div class="cnt"> 
  <div class="t">
   
  </div>
</div>

你能帮帮我吗？

最佳答案

你希望圆是圆的并且比父级宽得多，但纵横比相同或相似， overflow hidden ，你可以用单个元素来完成。

div {
  width: 400px;
  height: 300px;
  background: blue;
  position: relative;
  overflow: hidden;
}
div:after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translateX(-50%);
  background: red;
  height: 300%; width: 400%;
  border-radius: 50%;
}

<div></div>

关于CSS 边框半径问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41577695/

上一篇：css - 如何避免重复选择器下的 LESS 嵌套？

下一篇：css - 将 svg 转换为 png 时如何包含 CSS 样式

相关文章：

TableView 中的 JavaFX 单元格颜色

jquery - 在 CSS 和 jquery offset 方面需要帮助

html - 如何在 CSS 中引用带空格的长类名？

javascript - javascript 遇到问题并使其与我现有的代码一起工作

html - Div 标签中的居中元素

css - 一行中的多个编辑器字段和编辑器标签

html - 使用 CSS 3D 变换创建 3D Tic Tac Toe UI

css - Bootstrap CSS : center any col- that overflows a line

CSS线性渐变 Angular 位置

CSS - 在同一选择器上设置样式之前覆盖属性是一种好习惯吗？