4 列全角 link 部分

Question

我将在即将推出的网站上构建一个部分，该部分包含 4 列 link 部分，如下面的屏幕截图所示。

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

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

有什么方法可以让 HTML 中的每个框（包括人字形）然后只为背景中的图像添加背景图像？

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

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>

4 列全角 link 部分

4 column full-width link section

html

css

background-image

bootstrap-4