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

Question

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

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

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

来自代码笔示例：

@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 将我的旗帜显示为分叉丝带？

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

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

Answer 1

将 div 插入到锚标记中，并在内容前后设置样式以显示蓝色十字。使用 + 符号显示十字下方的白色。 jsfiddle.net/8g1w5va9/4

编辑

刚看到你的fiddle。看起来不错！本来只是想提出类似的建议，但决定至少构建一些工作模型。

Answer 2

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

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

/* 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 的输出，因为蓝色十字没有小三角形切口，因为我试图创建一个透明的切口（所以您可以在具有任何背景的元素之上使用它）。但如果它总是灰色背景那么也可以做到。

下面是我添加的代码：

.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>

Answer 3

你有一个很好的基础可以继续下去。它只需要在这里和那里进行一些调整。（尽管为旗帜制作个人风格将是一个巨大的痛苦）。只有几个地方可以改进。在大多数情况下，当使用绝对定位时，您可能希望定位的内容与父元素的某些边缘对齐。为此，您可以使用 left: -1em 之类的负值或其他任何值，但很多时候，保留左侧 auto 并将右侧属性设置为 100% 会更稳健。您还将底部边框设置为 right:0。在将其放入此答案时，我发现字体大小差异导致其对齐不正确。解决这个问题的一种方法是给它一个 left:50%，负边距等于左边框。在本例中为 1.5em。有一些变化，但都是关于理解和利用 top、right、bottom 和 left 的最大潜力，其中包括基于百分比的值。

希望对您有所帮助！

body {
  padding: 2em;
}

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

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

.norway {
  position: absolute;
  top: -0.5em;
  right: 1em;
  z-index: 1;
  font-size: 2em;
  height: 70px;
  width: 42px;
  background: linear-gradient(180deg, transparent 28%, blue 28%, blue 34%, transparent 34%),
    linear-gradient(90deg, transparent 40%, white 40%, white 46%, blue 46%, blue 54%, white 54%, white 60%, transparent 60%),
    linear-gradient(180deg, red 25%, white 25%, white 28%, blue 28%, blue 34%, white 34%, white 37%, red 37%);
}

.ribbon:before {
  content: "";
  font-size: 0.5em;
  position: absolute;
  border-style: solid;
  border-color: transparent transparent #B71C1C transparent;
  top: 0;
  right: 100%;
  border-width: 0 0 1em 0.7em;
  z-index: -1;
}
.ribbon:after {
  content: "";
  font-size: 0.5em;
  position: absolute;
  height: 5em;
  border: 1.5em solid #F44336;
  z-index: -1;
  bottom: 0;
  border-top-width: 1.5em;
  border-bottom-color: lightgrey;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;

  left: 50%;
  margin-left: -1.5em;
  -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="norway ribbon"></a>
          Norway
        </div> 
      </div>
    </div>
</div>

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

How can I render country flags as a ribbon, using CSS only?

html

css

css-shapes