文章/答案/技术大牛

发布

社区首页 >问答首页 >导航栏悬停效果- CSS

问导航栏悬停效果- CSS
EN

Stack Overflow用户

提问于 2019-10-10 15:20:30

回答 1查看 76关注 0票数 1

我正在开发一个导航栏。我上传了一张图片，上面画了一个红色的圆圈。我必须把它做成那个形状。我怎么才能做到呢？如何在单个div中创建这种形状

下面是我的代码：

<!DOCTYPE html>
<html>
<head>
	<title>CSS Shape</title>
	<style>

.triangletwo {
  width:100px;
  height:100px;
  display:inherit;
  opacity:0;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  clip-path: polygon(100% 0, 0 0%, 50% 80%);
	}
</style>
</head>
<body>
   <div style="width: 200px; height: 200px; overflow: hidden; margin: 0px; display: inline-block; clip-path: polygon(100% 0, 0 0%, 50% 80%);">
   </div>

   <div style="width: 100px; height: 100px; overflow: hidden; background: #6d74a3; margin-left:-100px; display: inline-block;clip-path: polygon(50% 0, 0 80%, 100% 80%);">
   </div>
   <div style="width: 100px; height: 100px; overflow: hidden; background: #6d74a3; margin-left:-42px; margin-bottom: -20px; display: inline-block; clip-path: polygon(100% 0, 0 0%, 50% 80%);">
      <div class="triangletwo" style="display: inline-block;"></div>
   </div>
</body>
</html>

javascript

html

css

html5-canvas

回答 1

Stack Overflow用户

发布于 2019-10-10 15:53:05

可以，您可以使用内部带有文本的div来创建它。希望这对你有所帮助

.single-div {
  background-color: #a224a2;
    color: white;
    font-size: 25px;
    width: 150px;
    height: 100px;
    position: relative;
    clip-path: polygon(30% 0, 40% 25%, 100% 25%, 70% 99%, 60% 76%, 0 75%);
    display: flex;
}

.text {
  margin: auto;
}

<div class="single-div">
  <span class="text">Home</span>
</div>

票数 5

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

原文链接：

https://stackoverflow.com/questions/58317470

复制

相似问题

问导航栏悬停效果- CSS
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航栏悬停效果- CSSEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航栏悬停效果- CSS
EN