如何创建具有边框的部门？ [英] How to create sector having border?

问题描述

我是一个CSS新手，所以不知道多少邻接它。我如何创建一个说边40deg的部门？

查看我的代码： http://jsfiddle.net/gzt9abx5/1/

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

我需要的形状是扇形，而不是背景。

解决方案

你可以使用 overflow：hidden; / code>和 transform：rotate; 。

如果您不想将鼠标悬停在区域上，只需尝试以下操作：

  #ab {height：150px; width：198px; border-bottom：4px solid海军; overflow：hidden; position：relative;}＃ab：before {content：; position：absolute; top：-50px; left：-213px; height：200px; width：400px; border-radius：200px 200px 0 0;背景：番茄; border：4px solid navy;转化起点：50％100％; transform：rotate（140deg）;}  

 < div id =ab>  

/ strong>，您需要使用上面使用的相同方法的两个元素：

  .mother {height：150px; width：199px; border-bottom：4px solid海军; overflow：hidden;}＃ab {content：;位置：相对; top：-50px; left：-213px; height：200px; width：400px; border-radius：200px 200px 0 0;背景：番茄; border：4px solid navy;转化起点：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>  

I am a CSS newbie so don't know much abut it. How can I create a sector of say 40deg with border? I can create 90deg sectors, 180deg ones, but not any other angles.

See my code : http://jsfiddle.net/gzt9abx5/1/

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

I need the shape to be sector, not the background. It is not a duplicate of another question.

解决方案

You can achieve it using overflow: hidden; and transform: rotate;.

If you don't want hover on sector, you can simply try the following :

#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">

For hover effects, you'll need to use two elements, with the same method used above :

.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>

这篇关于如何创建具有边框的部门？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！