导航栏悬停效果 - CSS答案

【问题标题】：Navigation bar hover effect - CSS导航栏悬停效果 - CSS
【发布时间】：2020-02-07 13:51:45
【问题描述】：

我正在开发导航栏。我上传了一张图片，其中我做了一个红色的圆圈。我必须做出那个形状。我怎样才能做到？如何在单个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>

【问题讨论】：

我猜，你可以使用 CSS 剪辑路径：css-tricks.com/almanac/properties/c/clip-path
你可以通过Javascript画布绘制这个形状。

标签： javascript html css html5-canvas

【解决方案1】：

是的，您可以使用带有文本的 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>

【讨论】：