Question

我是一名CSS新手，所以不太了解它。如何用边框创建一个40deg的扇区？我可以创建90度扇区，180度扇区，但不能创建任何其他角度。

div.abc {
    height: 100px;
    width: 100px;
    background: red;
    border-radius: 0 100px 0 0;
    border: 4px solid blue;
}

我需要将形状设为扇形，而不是背景。这不是另一个问题的重复。

Answer 1

您可以使用overflow: hidden;和transform: rotate;来实现它。

如果您不想悬停在扇区，您只需尝试以下操作：

#ab {
    height: 150px;
    width: 198px;
    border-bottom:4px solid navy;
    overflow: hidden;
    position: relative;
}
#ab:before {
    content:"";
    position: absolute;
    top:-50px;
    left: -213px;
    height: 200px;
    width: 400px;
    border-radius: 200px 200px 0 0;
    background: tomato;
    border: 4px solid navy;
    transform-origin: 50% 100%;
    transform: rotate(140deg);
}

<div id="ab">

对于悬停效果，您需要使用两个元素，使用上面使用的相同方法：

.mother {
  height: 150px;
  width: 199px;
  border-bottom: 4px solid navy;
  overflow: hidden;
}
#ab {
  content: "";
  position: relative;
  top: -50px;
  left: -213px;
  height: 200px;
  width: 400px;
  border-radius: 200px 200px 0 0;
  background: tomato;
  border: 4px solid navy;
  transform-origin: 50% 100%;
  transform: rotate(140deg);
  -webkit-transform: rotate(140deg);
}
#ab:hover {
  background: rosybrown;
  transition: 0.8s ease;
}

<div class="mother">
  <div id="ab"></div>
</div>

如何创建有边界的部门？

1 个答案: