Question

我正在导航栏上。我上传的图像上有一个红色圆圈。我必须做那个形状。我该怎么做？如何在单个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>

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

导航栏悬停效果-CSS

1 个答案: