3

老实说，我不确定从哪里开始（我是一名图形设计师，对 HTML/CSS 有更深入的研究，但我目前的经验相当有限，所以这个问题目前超出了我的能力范围）：

在我最新的网站设计的一部分中，我用带状阴影分割了网站的部分：部分交替使用标准页面背景和应用 10% 黑色透明度覆盖，用于区分下一个部分。

问题是每个新部分都应该有一个由三个中心箭头组成的块，这些箭头从上面较暗（或较浅）的阴影中切出，如下所示：

在此处输入图像描述

我知道如何使用图像来管理它，但由于背景是一种重复模式，因此该解决方案并不能真正起作用。

有什么建议/提示可以帮助我解决这个问题吗？基本上，所有亮部都需要以三个 10% 黑色透明度的箭头开始，所有暗部都需要以三个箭头从 10% 透明度背景中切出。

是否有基于 HTML/CSS 的方法来执行此操作？

4

2 回答 2

3

带有梯形上边框的容器

梯形：
我在顶部添加了所需的边框，并带有一个伪元素::before。
选择将此内容显示为块，这样它就可以获取其容器的大小。
将此元素相对定位，使其不会显示在其容器内。position:relative;&top: -30px;
边框有一个静态的 30 像素，这就是为什么它显示高 -30 像素，所以它正好在我们的 .cut-out 上方。

透明度： 使用rgba()设置颜色可让您设置颜色的不透明度。
所以 rgba(0,0,0, 0.1) 将容器/梯形设置为 10% 的不透明度。其中最后一个值为 1 将等于 100% 不透明度。（您将使用rgb()代替）

body {
  margin: 0;
}
main {
  background-color: rgba(0, 0, 0, 0.1);
}
.cut-out {
  display: inline-block;
  float: left;
  background-color: rgba(0, 0, 0, 0.1);
  width: 100px;
  height: 150px;
  margin: 40px 0 0 0;
}
.cut-out::before {
  content: "";
  border-bottom: 30px solid rgba(0, 0, 0, 0.1);
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  display: block;
  position: relative;
  top: -30px;
}
.stop {
  clear: both;
}
<main>
<div class="cut-out">Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, </div><!--
--><div class="cut-out" style="width:150px;">Lorem ipsum dollar si amet, </div><!--
--><div class="cut-out" style="width:250px;"></div><!--
--><div class="cut-out"></div>
  <div class="stop"></div>
</main>

于 2015-05-04T07:38:42.813 回答
1

Here's a fiddle that should help you out. This is done using simple CSS, and I'm just illustrating it here. You can adapt this to match your needs.

Sample HTML:

<div class="cutout"></div>

And the CSS

.cutout {
    width: 100px;
    height: 0px;
    background: none;
    border-bottom: solid 30px rgba(0, 0, 0, 0.1);
    border-right: solid 30px transparent;
    border-left: solid 30px transparent;
    border-top: solid 0 transparent;
}

This will give you one of the elements to be repeated. To get some understanding of how this works, check out the following CSS in the updated fiddle:

.cutout {
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, 0.05);
    border-bottom: solid 30px rgba(0, 255, 0, 0.1);
    border-right: solid 30px rgba(0, 0, 0, 0.05);
    border-left: solid 30px rgba(0, 0, 0, 0.05);
    border-top: solid 0 rgba(0, 0, 0, 0.05);
}

Basically, we're assigning transparent color to the right and left borders, and giving the div a height of 0. This means only the bottom border remains visible, and a trapezoidal shape is formed because of the border width.

Edit: Looks like the links posted by @Myke showcase this already, I recommend playing around with code like this until you get a good idea of how to render similar shapes.

于 2013-08-13T19:04:55.960 回答