我必须为我的网站建设六边形旋转木马指标。我需要像这样的形象。
因此，使用此代码，当carousel处于活动状态时，它会查找工作。它是全红色背景。
但是当它不活动的时候，我有一个正方形在六边形里面，你能帮我，使它在六边形里面不活动，我可以看到六边形的形状吗？
谢谢大家提前干杯！
#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>
2条答案
按热度按时间dzjeubhm1#
让我试着用猜测来回答这个问题，因为我不完全明白你的意思。
你可以使用css的clip-path，它的工作原理是从它所应用的元素中剪切一些东西，在这个例子中是一个六边形。你的实际对象不会改变形状。
你的实际对象仍然是一个带有4px实心边框的盒子。
当这个形状有.active类的时候，你可以用边框和背景色来给它上色。
虽然它有类不活动的背景没有背景颜色指定的css，这就是为什么它显示一个白色的方块.
如果你想要一个带红色边框的白色六边形，你可以尝试使用伪元素，像这样的东西可能会奏效：
wydwbb8l2#
我在photoshop中做了六边形指示器并导出svg。我用于
ol.carousel-indicators li和ol.carousel-indicators li.active类background属性和一些css。