时间戳

首页 > 解决方案 > 4列全角链接部分

html - 4列全角链接部分

问题描述

我将在即将推出的网站上构建一个部分，该部分具有 4 列链接部分，如下图所示。

4列链接部分

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

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

有没有办法可以在 HTML 中制作每个框，包括雪佛龙，然后只需为背景中的图像添加背景图像？

让我知道是否有人有任何想法

标签： htmlcssbootstrap-4background-image

解决方案

我为您创建了一个纯 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>

推荐阅读