我必须为我的网站建立六边形旋转木马指标。我需要像这样的图像
因此，使用此代码，当旋转木马处于活动状态时，它是工作查找。全红色背景
但是当它处于非活动状态时，六边形内有一个正方形。你能帮我把六边形里面的那个改成非活动的吗我能看到六边形?
谢谢大家提前干杯!
#section-testimonials .carousel-indicators {
bottom: 15px !important;
margin-bottom: unset !important;
}
#section-testimonials .carousel .carousel-indicators button {
display: inline-block;
background-color: transparent;
/* set background color to transparent */
background-clip: unset;
border: 4px solid red;
width: 10px;
height: 10px;
opacity: 1;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#section-testimonials .carousel .carousel-indicators button.active {
background-color: red;
border-color: red;
}<body>
<section id="section-testimonials">
<div id="carouselTestimonialsIndicators" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
</button>
<button type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide-to="1" aria-label="Slide 2">
</button>
<button type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active px-md-3">
<div class="comment-slider">
<p class="fs-6-mobile">“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. ”
</p>
</div>
</div>
<div class="carousel-item px-md-3">
<div class="comment-slider">
<p class="fs-6-mobile">“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. ”
</p>
</div>
</div>
<!-- <div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div> -->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon d-none" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon d-none" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>让我试着通过猜测来回答这个问题，因为我不完全确定你的意思。
你使用css clip-path，它的工作原理是从它所应用的元素中剪切一些东西，在这个例子中是一个六边形。你的实际对象不会改变形式。
你的实际对象仍然是一个实心4px边框的方框。
当它有。active类时，你可以使用边框和背景色来给这个形状上色。
当它的类处于非活动状态时，背景没有在css中指定的背景颜色，这就是为什么它显示一个白色的正方形。
如果你想要一个红色边框的白色六边形，你可以尝试使用伪元素，像这样的东西可能会奏效:
#section-testimonials .carousel-indicators {
bottom: 15px !important;
margin-bottom: unset !important;
}
#section-testimonials .carousel .carousel-indicators button {
display: inline-block;
background-color: red;
/* set background color to transparent */
background-clip: unset;
width: 18px;
height: 18px;
opacity: 1;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
overflow: hidden;
position: relative;
border:none;
}
#section-testimonials .carousel .carousel-indicators button.active {
background-color: red;
border-color: red;
}
#section-testimonials .carousel .carousel-indicators button:before {
display: block;
background: white;
width: 14px;
position: absolute;
top: 2px;
left: 2px;
height: 14px;
content: "";
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#section-testimonials .carousel .carousel-indicators button.active:before {
background: red;
}<body>
<section id="section-testimonials">
<div id="carouselTestimonialsIndicators" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
</button>
<button type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide-to="1" aria-label="Slide 2">
</button>
<button type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active px-md-3">
<div class="comment-slider">
<p class="fs-6-mobile">“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. ”
</p>
</div>
</div>
<div class="carousel-item px-md-3">
<div class="comment-slider">
<p class="fs-6-mobile">“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. ”
</p>
</div>
</div>
<!-- <div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div> -->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon d-none" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon d-none" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>我在photoshop中做了六边形指示器，并导出了svg。我使用了ol.carousel-indicators li和ol.carousel-indicators li.active类的background属性和一些css。
.carousel-item p{
font-size:50px;
background-color: #d4d3d3;
height:100vh;
display:flex !important;
justify-content:center;
align-items:center ;
padding-bottom:1.5em !important;
}
.carousel-inner{
width: 80vw;
height:90vh;
}
ol.carousel-indicators li {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 1067 1067'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; stroke: %23030303; stroke-width: 4.68px; fill-rule: evenodd; %7D %3C/style%3E%3C/defs%3E%3Cpath id='Polygon_1' data-name='Polygon 1' class='cls-1' d='M707.25,209L881,517.5,707.25,826H359.75L186,517.5,359.75,209h347.5Z'/%3E%3C/svg%3E%0A") no-repeat;
display: block;
box-sizing: border-box;
width: 64px;
height: 64px;
}
ol.carousel-indicators li.active {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 1067 1067'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ee0a2a; stroke: %23030303; stroke-width: 4.68px; fill-rule: evenodd; %7D %3C/style%3E%3C/defs%3E%3Cpath id='Polygon_1' data-name='Polygon 1' class='cls-1' d='M702.75,206L872,518.5,702.75,831H364.25L195,518.5,364.25,206h338.5Z'/%3E%3C/svg%3E ") no-repeat;
display: block;
box-sizing: border-box;
width: 64px;
height: 64px;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<p class="d-block w-100 " alt="...">Text-1</p>
</div>
<div class="carousel-item">
<p class="d-block w-100" alt="...">Text-2</p>
</div>
<div class="carousel-item">
<p class="d-block w-100" alt="...">Text-3</p>
</div>
<div class="carousel-item">
<p class="d-block w-100" alt="...">Text-4</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>