CODEWITHSUNDEEP
htmlcsscss-shapes
Sibiraj
Sibiraj

Reputation: 4756

Align shapes with css :before, :after

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

enter image description here

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?

Upvotes: 1

Views: 179

Answers (2)

AG_
AG_

Reputation: 2699

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>

Upvotes: 1

djmayank
djmayank

Reputation: 392

  1. Take http://dowebsitesneedtolookexactlythesameineverybrowser.com/ to heart. Looking good is a sensible goal, looking the same isn't.
  2. 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)
  3. Use them (don't forget to validate the HTML and CSS and to lint the JS)
  4. Ensure you engage standards mode
  5. 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.

Upvotes: 0

Related Questions