html - 如何仅使用 CSS 将国旗渲染为丝带？

Question

我需要提供一些数据。每个数据 block 都需要一个国家标志。我想展示国旗，使用一个漂亮的小悬挂横幅，如下所示:

这张图片是用paint编辑的，我用的例子来自this page

此链接对here, shows how to display flags of Europe++ in pure CSS .在我的系统中，我只需要北欧国旗，它们都用十字表示。

来自 codepen 示例:

@function cross($back, $main, $detail: $back){
  @return linear-gradient(90deg, transparent 28%, $main 28%, $main 34%, transparent 34%),
    linear-gradient(transparent 42%, $detail 42%, $detail 46%, $main 46%, $main 58%, $detail 58%, $detail 62%, transparent 62%),
    linear-gradient(90deg, $back 25%, $detail 25%, $detail 28%, $main 28%, $main 34%, $detail 34%, $detail 37%, $back 37%);
}

如果我推导出这个(并将其旋转 90 度以适合我的首选方向，我可以获得类似 this 的内容:

HTML:

<div class="norway"></div>

CSS:

.norway{
background: linear-gradient(180deg, transparent 28%, blue 28%, blue 34%, transparent 34%),
    linear-gradient(90deg, transparent 42%, white 42%, white 46%, blue 46%, 
    blue 58%, white 58%, white 62%, transparent 62%),
    linear-gradient(180deg, red 25%, white 25%, white 28%, blue 28%, blue 34%, 
    white 34%, white 37%, red 37%);
 height: 600px;
 width: 400px;
}

然而，悬挂横幅的例子并没有真正显示元素本身，只是显示了它的边框。我喜欢底部的分割，所以我希望能够分别在不同的边界边设置线性渐变，或者以其他方式解决问题。我尝试了几种方法，但我似乎无法使渐变在各个边界边上起作用。

有谁知道如何仅使用 CSS 将我的旗帜显示为 fork 的丝带？

顺便说一句，Czech Republic is easy...

更新:我能够渲染挪威语版本，但我必须制作两个元素。一个在元素的背景中显示标志，另一个元素在其上方，仅显示底部边框，颜色与 block 背景相同。这似乎是一个非常脆弱的解决方案，但...... https://jsfiddle.net/azjctc1y/

Answer 1

Note: After looking at Joseph's answer, I'd suggest you to go with that but this is another way.

我们可以使用 background 和 linear-gradient 图像来代替使用 border 来创建标志，如下面的代码片段所示。

/* Latest compiled and minified CSS included as External Resource*/

html {
  margin: 20px;
}
/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
  margin: 10px;
}
.test-container {
  background-color: lightgrey;
  border: 1px solid black;
  position: relative;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
}
.close-ribbon {
  position: absolute;
  top: 0;
  right: 1em;
  z-index: 1;
  color: #eee;
  font-size: 2em;
}
.close-ribbon:before {
  content: "";
  font-size: 0.5em;
  position: absolute;
  border-style: solid;
  border-color: transparent transparent #B71C1C transparent;
  top: -1em;
  right: 3em;
  border-width: 0 0 1em 0.7em;
  z-index: -1;
}
.close-ribbon:after {
  position: absolute;
  content: "";
  top: -1em;
  right: 0;
  height: 5em;
  width: 3em;
  background: linear-gradient(to bottom right, transparent 48%, lightgrey 52%), linear-gradient(to bottom left, transparent 48%, lightgrey 52%), linear-gradient(180deg, transparent 38%, blue 38%, blue 44%, transparent 44%), linear-gradient(90deg, transparent 40%, white 40%, white 46%, blue 46%, blue 56%, white 55%, white 62%, transparent 62%), linear-gradient(180deg, red 35%, white 35%, white 38%, blue 38%, blue 44%, white 44%, white 47%, red 47%), linear-gradient(to bottom right, red 50%, lightgrey 55%), linear-gradient(to top right, lightgrey 45%, red 50%);
  background-size: 1.6em 1.4em, 1.45em 1.4em, 3em 4em, 3em 4em, 3em 4em, 1.2em 1.1em, 1.2em 1.1em;
  background-position: 0% 100%, 100% 100%, 0% 0%, 0% 0%, 0% 0%, 0% 100%, 100% 100%;
  background-repeat: no-repeat;
  font-size: 0.5em;
  z-index: -1;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="test-container">
        <a class="close-ribbon"></a>
        Czech Republic is easy...
      </div>
    </div>
  </div>
</div>

---

原答案:

它不是 100% 像所提供的图像或你的 fiddle 的输出，因为蓝色十字没有小三 Angular 形切口，因为我试图创建一个透明的切口(这样你就可以在具有任何背景的元素的顶部)。但如果它始终是灰色背景，那么也可以这样做。

下面是我添加的代码:

.close-ribbon:after {
  position: absolute;
  content: "";
  top: -1em;
  right: 0;
  height: 5em;
  width: 3em;
  background: linear-gradient(180deg, transparent 28%, blue 28%, blue 34%, transparent 34%), linear-gradient(90deg, transparent 40%, white 40%, white 46%, blue 46%, blue 58%, white 58%, white 62%, transparent 62%), linear-gradient(180deg, red 25%, white 25%, white 28%, blue 28%, blue 34%, white 34%, white 37%, red 37%), linear-gradient(to bottom right, red 50%, transparent 55%), linear-gradient(to top right, transparent 45%, red 50%);
  background-size: 3em 4em, 3em 4em, 3em 4em, 1.25em 1em, 1.2em 1em;
  background-position: 0% 0%, 0% 0%, 0% 0%, 0% 100%, 100% 100%;
  background-repeat: no-repeat;
  /* other styles */
}

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

.test-container {
  background-color: lightgrey;
  border: 1px solid black;
  position: relative;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
}

.close-ribbon {
  position: absolute;
  top: 0;
  right: 1em;
  z-index: 1;
  color: #eee;
  font-size: 2em;
}

.close-ribbon:before {
  content: "";
  font-size: 0.5em;
  position: absolute;
  border-style: solid;
  border-color: transparent transparent #B71C1C transparent;
  top: -1em;
  right: 3em;
  border-width: 0 0 1em 0.7em;
  z-index: -1;
}

.close-ribbon:after {
  position: absolute;
  content: "";
  top: -1em;
  right: 0;
  height: 5em;
  width: 3em;
  background: linear-gradient(180deg, transparent 28%, blue 28%, blue 34%, transparent 34%), linear-gradient(90deg, transparent 40%, white 40%, white 46%, blue 46%, blue 58%, white 58%, white 62%, transparent 62%), linear-gradient(180deg, red 25%, white 25%, white 28%, blue 28%, blue 34%, white 34%, white 37%, red 37%), linear-gradient(to bottom right, red 50%, transparent 55%), linear-gradient(to top right, transparent 45%, red 50%);
  background-size: 3em 4em, 3em 4em, 3em 4em, 1.2em 1em, 1.2em 1em;
  background-position: 0% 0%, 0% 0%, 0% 0%, 0% 100%, 100% 100%;
  background-repeat: no-repeat;
  font-size: 0.5em;
  z-index: -1;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="test-container">
        <a class="close-ribbon"></a>
        Czech Republic is easy...
      </div>
    </div>
  </div>
</div>