如何在div上创建半圆角效果

Question

我正在尝试创建具有自定义形状的菜单，但没有成功。有人可以帮助我找出创建此形状的方法吗？我已经尝试用::before标签制作它，但是一旦div调整大小，我就失去了形状。

Answer 1

<style>
  .rounded {
    height: 400px;
    width: 300px;
    background-color: #bbb;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    display: inline-block;
  }
</style>
<div class="rounded"></div>

提供上下边界半径将对其进行处理。

Answer 2

这样的东西对您有用吗？

<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">

<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>

<!-- Modified from 'heart' shape:
 https://itnext.io/how-to-create-beautiful-shapes-in-css-a-teardown-of-3-shapes-purely-made-in-css-c3ac7cb99c4
-->
<style>
 ul { list-style-type: none; cursor: pointer; }

.heart {
  position: relative;

  width: 200px;
  height: 160px;
}
.heart:before,
.heart:after {
  position: absolute;
  content: "";

  width: 200px;
  height: 320px;
  left: 100px;

  background-color: tomato;

  border-radius: 100px 100px 0 0;

/*  transform: rotate(-45deg); */
  transform-origin: 0 100%;
}
.heartMenu {
  position: absolute;
  left: 75px;
  top: 75px;
  z-index: 10;
}
</style>

</head><body>
<div id="heart" class="heart">
 <ul class="heartMenu">
  <li> Link 1 </li>
  <li> Link 2 </li>
  <li> Link 3 </li>
  <li> Link 4 </li>
  <li> Link 5 </li>
 </ul>
</div>

<script>

</script>

</body></html>

如何在div上创建半圆角效果

问题描述投票：0回答：2

2个回答

最新问题

如何在div上创建半圆角效果

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2