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.

我们可以使用带有线性渐变图像的背景，而不是使用边框来创建标志，如下面的代码片段所示。

/* 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>