2

I need to present some data. Each block of data needs a country flag. I would like to display the country flag, using a nice little hanging banner, like this:

enter image description here

This image is edited in paint, and the example I've used, comes from this page

This link right here, shows how to display flags of Europe++ in pure CSS. In my system, I only need Nordic flags, which are all represented by a cross.

From the codepen example:

@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%);
}

If I derive this (and rotate it 90deg to fit my preferred orientation, I can get something like 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;
}

The hanging banner example however, is not really displaying the element itself, merely its border. I like the split in the bottom, So I would like to be able to set the linear gradients on the different border sides individually, or somehow otherwise solve the problem. I have tried a few approaches, but I can't seem to make the gradients work on individual border sides.

Does anyone know how I can display my flags as split end ribbons, using only CSS?

By the way, the Czech Republic is easy...

UPDATE: I was able to render a Norwegian version, but I had to make two elements. One displaying the flag in the background of an element, and another element over it, displaying only the bottom border, in the same color as the block background. It seems like a pretty fragile solution, though... https://jsfiddle.net/azjctc1y/

3
  • It looks pretty good to be honest, the only suggestion is to make each "tail" a separate triangle using the border hack. But that introduces another element and adds complexity to flags with different colored tails. Commented Mar 16, 2016 at 14:20
  • You can consolidate those two classes with some minor adjustments: jsfiddle.net/LbapkLc7 Commented Mar 16, 2016 at 14:22
  • @JosephMarikle, That looks like an awesome solution! I really like it, and it feels right too :). If you write it up as an answer, I would be happy to accept it! :)
    – jumps4fun
    Commented Mar 16, 2016 at 15:04

3 Answers 3

2

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

Instead of using border to create the flag, we can use background with linear-gradient images like in the below snippet.

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


Original Answer:

It is not 100% like the image provided in question or the ouput of your fiddle because the blue cross doesn't have the small triangular cut because I was trying create a cut that was transparent (so that you can use it on top of an element with any background). But if it is always going to be a grey background then that can also be done.

The below is the code that I have added:

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

4
  • This is very close! But I need a little better rendering, as there is a pixel stripe between the flag itself, and the splits. Also, as you said, the split is not complete, in the way that it is flat in the middle. I could live with that last one though.
    – jumps4fun
    Commented Mar 16, 2016 at 14:58
  • @KjetilNordin: Sorry, I didn't quite get the there is a pixel stripe between the flag itself, and the splits :( Could you maybe take a screenshot and highlight it for me? I will work on getting that fixed.
    – Harry
    Commented Mar 16, 2016 at 15:03
  • Where would the screenshot be posted? It doesn't seem like a fit for the question itself...
    – jumps4fun
    Commented Mar 16, 2016 at 15:16
  • @KjetilNordin: You could edit your question, use the image upload option, upload it but not save the edits and post the link (will be present at bottom of the contents) in comments here. But if you are happy with the other option then leave it. May not be worth the trouble.
    – Harry
    Commented Mar 16, 2016 at 15:32
1

You have a great base to go on. It just needs a few tweaks here and there. (Making individual styles for flags is going to be a colossal pain though). There's just a few places you could improve it. In most cases when using absolute positioning, you may want to have whatever you are positioning align with some edge of the parent element. For that you can use negative values like left: -1em or whatever, but a lot of times, it's more robust to leave left auto and set the right attribute to 100%. You also set the bottom border to right:0. In throwing it in this answer I discovered that the font size difference caused it to be aligned incorrectly. One way you can fix that is to give it a left:50% with a negative margin equal to the left border. In this case it's 1.5em. A few changes, but it's all about understanding and leveraging top, right, bottom, and left to their fullest potential, which includes percent based values.

Hope it helps!

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>

1
  • This is the solution I went with. Just a small note: The .ribbon{} css code is redundant, as it is completely overridden by the .norway{}-settings. The only values the latter doesn't override directly are color and font-size. Those are remains from my starting point example, where the banner had an 'x' typed, and was used as a close button. My desired version does not have text at all. You are also right; making individual flags without using some kind of scss, is a pain in the ass. Fortunately, I only need to create four different flags for now :). Thanks a lot for this!
    – jumps4fun
    Commented Mar 18, 2016 at 9:13
0

Inserted a div into the anchor tag and styled a before and after content to display the blue cross. Used a + symbol to display the white underneath cross. jsfiddle.net/8g1w5va9/4

EDIT

Just saw your fiddle. Looks good! Was just going to suggest something like that but decided to at least build somewhat of a working model.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.