如何仅使用CSS将国家/地区标记呈现为功能区？

时间：2016-03-16 13:28:00

标签： html css css3 css-shapes

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

enter image description here

此图像在绘画中编辑，我使用的示例来自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将我的旗帜显示为分叉乐队？

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

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

3 个答案:

答案 0 :(得分：2)

  

注意：在看了约瑟夫的回答之后，我建议你继续这样做，但这是另一种方式。

我们可以将SRC_URI = " \ file://my.patch;patchdir=${WORKDIR}/src \ file://src.tar.gz \ " 与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;
}

原始答案：

它不是100％喜欢提供的图像或小提琴的输出，因为蓝色十字架没有小三角形切割，因为我正在尝试创建一个透明的切口（这样你就可以使用它了任何背景元素的顶部）。但如果它总是灰色背景，那么也可以这样做。

以下是我添加的代码：

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

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

答案 1 :(得分：1)

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

希望它有所帮助！

＆＃13;
＆＃13; 
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; 

}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

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

修改

刚看到你的小提琴。看起来不错！只是建议这样的事情，但决定至少建立一些工作模式。

相关问题
最新问题