html - 4 列全 Angular 链接部分

Question

我将在即将推出的网站上构建一个部分，其中包含 4 列链接部分，如下图所示。

每个框都是一个可点击的链接，悬停时它们会改变颜色。我正在使用 boostrap 框架。

我认为最好将每个框保存为图像，但这意味着还要为悬停提供图像，并且页面可能会开始变得有点慢。

有没有办法可以在 HTML 中完成每个框(包括 V 形)，然后只为背景中的图像添加背景图像？

如果有人有任何想法请告诉我

Answer 1

我已经为您创建了一个纯 CSS 的简单示例。我在代码中添加了注释

.blocks {
  display: flex;
  width: 100%;
  height: 50px;
}

.blocks .block {
  flex: 0 0 25%;
  background-color: blue;
  position: relative;
  display: flex;
}

.blocks .block a {
  
  padding-left: 30px; /* so the triangle doesnt overlap the text */
  color: white;
  margin: auto 0;
}

/* not(:last-child) so the last one will not have the triangle */
.blocks .block:not(:last-child)::after {
  content:"";
  position:absolute;
  border-left:15px solid blue; /*This is your color of the arrow*/
  border-top:25px solid transparent; /*half the height (50px)*/
  border-bottom:25px solid transparent; /*half the height (50px)*/
  right:-15px; /*we want it on far right and overlapping the next block*/
  top:0;
  z-index: 1;
}

/* 2n selector selects every second element so you can have diffrent colors automaticly */
.blocks .block:nth-of-type(2n) {
  background-color: green;
}

.blocks .block:nth-of-type(2n)::after {
  border-left:15px solid green;
}

<div class="container">
  <section class="blocks">
    <div class="block">
      <a href="#">
        Block1
      </a>
    </div>
    <div class="block">
      <a href="#">
        Block2
      </a>
    </div>
    <div class="block">
      <a href="#">
        Block3
      </a>
    </div>
    <div class="block">
      <a href="#">
        Block4
      </a>
    </div>
  </section>
</div>