文章/答案/技术大牛

发布

社区首页 >问答首页 >创建带有轮廓的CSS形状

问创建带有轮廓的CSS形状
EN

Stack Overflow用户

提问于 2014-10-03 04:08:24

回答 2查看 534关注 0票数 0

我正试图创建一个网站，对于导航，我认为它将是首席运营官，如果我可以使用形状，我试图避免使用图像。

我想要创造的具体形状是一个新月，有一个边界。

我所要达到的目标是：

我想用红色的边框来完成这个形状，而其余的圆圈，不是红色轮廓的一部分，消失了。

.bottom_line {
  position: absolute;
  height: 500px;
  width: 500px;
  border: 10px solid black;
  border-radius: 500px;
  box-shadow: 100px 100px 0px 0px red inset;
}

.top_line {
  position: absolute;
  top: 110px;
  left: 110px;
  height: 500px;
  width: 500px;
  border: 10px solid black;
  border-radius: 500px;
}

<div class="top_line"></div>
<div class="bottom_line"></div>

css

css-shapes

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-10-03 05:48:06

经过了很多周旋之后，我想出了这个。谢谢你的回答帮我想出了这个。

.circle {
  position: absolute;
  top: 15px;
  left: 15px;
  height: 500px;
  width: 500px;
  border: 10px solid transparent;
  border-radius: 500px;
  box-shadow: 100px 100px 0px 0px red inset;
}

.bottom_line {
  position: absolute;
  top: 110px;
  left: 110px;
  height: 500px;
  width: 500px;
  border: 10px solid transparent;
  border-radius: 500px;
  box-shadow: 20px 20px 0px -8px purple inset;
  z-index: 2;
}

.top_line {
  position: absolute;
  height: 510px;
  width: 510px;
  border: 10px solid transparent;
  border-radius: 510px;
  box-shadow: 15px 15px 0px 7px purple inset;
  z-index: 1;
}

<div class="circle"></div>
<div class="top_line"></div>
<div class="bottom_line"></div>

票数 1

Stack Overflow用户

发布于 2014-10-03 05:27:53

查看dropbox的图像，您不希望内弧的圆圈。因此，您可以将它用于top_line类：

.top_line {
  position: absolute;
  top: 110px;
  left: 110px;
  height: 430px;
  width: 430px;
  border-radius: 500px;
  z-index: 2;
  background-color: #FFF;
  box-shadow: 9px 10px 0px 0px black inset;
  border-bottom-left-radius: 300px;
  border-top-right-radius: 300px;
}

<div class="top_line"></div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26173162

复制

相似问题

问创建带有轮廓的CSS形状
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建带有轮廓的CSS形状EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建带有轮廓的CSS形状
EN