Align shapes with css :before, :after

Question

I am trying to make shapes in the :before/ :after . this works fine in chrome but in Firefox. there is a small misalignment. and while printing that causes a small white space between the element and the :after selector.

This is how it looks in print preview with Firefox

HTML

<div class="container">
    <div class="topbar">
      <div class="text">Text</div>
    </div>
 </div>

My CSS

/* Styles go here */

.container .topbar {
  height: 15px;
  background-color: #91C34F !important;
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.container .topbar .text {
  position: relative;
  color: #fff !important;
  float: right;
  top: 3px;
  background-color: #91C34F !important;
  font-size: 16px;
  padding: 8px 80px;
}

.container .topbar .text:after {
  height: 0;
  content: "";
  display: block;
  position: absolute;
  top: -0.5px;
  left: -37px;
  border-right: 38px solid #91C34F !important;
  border-bottom: 34px solid transparent;
}

This is a plunk for above code https://plnkr.co/edit/oll1ooap2mKC1EQo0n84?p=preview.

How to make that align properly in all browsers?

Try Using a CSS Reset --- necolas.github.io/normalize.css

Chandra Shekhar
– Chandra Shekhar

2017-08-06 06:33:32 +00:00
Commented Aug 6, 2017 at 6:33 — Chandra Shekhar
– Chandra Shekhar, Commented Aug 6, 2017 at 6:33
will try that...

Sibiraj
– Sibiraj

2017-08-06 07:12:22 +00:00
Commented Aug 6, 2017 at 7:12 — Sibiraj
– Sibiraj, Commented Aug 6, 2017 at 7:12

AG_ · Accepted Answer · 2017-08-06 07:14:35Z

1

use equal value for left, border-right and border-bottom, also there is nothing like .5px. use line-height to make text vertical align.

updated plunk

/* Styles go here */

.container .topbar {
  height: 15px;
  background-color: #91C34F !important;
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.container .topbar .text {
  position: relative;
  color: #fff !important;
  float: right;
  top: 3px;
  background-color: #91C34F !important;
  font-size: 16px;
  padding: 0px 80px;
  height:34px;
  line-height:28px;
}

.container .topbar .text:after {
  height: 0;
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: -34px;
  border-right: 34px solid #91C34F !important;
  border-bottom: 34px solid transparent;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <div class="topbar">
      <div class="text">Text</div>
    </div>
  </div>
</body>

</html>

answered Aug 6, 2017 at 7:14

AG_

2,7193 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sibiraj Over a year ago

thank you. but there is always a white space when printed with Firefox. can be a browser bug rite.

G-Cyrillus Over a year ago

@SibiRaj you can try to patch it with a shadow on .text {box-shadow:: -2px 0 1px -1px #91C34F or try another method : codepen.io/gc-nomade/pen/LjriC (pseudo is on top and hides parts of the container instead making it look bigger)

djmayank · Accepted Answer · 2017-08-06 05:54:14Z

Take http://dowebsitesneedtolookexactlythesameineverybrowser.com/ to heart. Looking good is a sensible goal, looking the same isn't.
Understand the standards (we never know if the difference is because of a bug or because you've provided instructions that only make sense for a particular window size)
Use them (don't forget to validate the HTML and CSS and to lint the JS)
Ensure you engage standards mode
Learn about bugs in browsers

Though your code is right, it works perfectly on chrome. Do check here,

https://jsfiddle.net/djmayank/q20e6u9m/

HTML:

<div class="container">
    <div class="topbar">
      <div class="text">Text</div>
    </div>
 </div>

CSS:

.container .topbar {
  height: 15px;
  background-color: #91C34F !important;
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.container .topbar .text {
  position: relative;
  color: #fff !important;
  float: right;
  top: 3px;
  background-color: #91C34F !important;
  font-size: 16px;
  padding: 8px 80px;
}

.container .topbar .text:after {
  height: 0;
  content: "";
  display: block;
  position: absolute;
  top: -0.5px;
  left: -37px;
  border-right: 38px solid #91C34F !important;
  border-bottom: 34px solid transparent;
}

Hope it helped.

Collectives™ on Stack Overflow

Align shapes with css :before, :after

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related