代码之家 › 专栏 › 技术社区 › Sibiraj Marko AvlijaÅ¡

将形状与css对齐:before,:after

css-shapes css html

Sibiraj Marko AvlijaÅ¡ · 技术社区 · 7 年前

我正在尝试在:before/:after中创建形状。这在chrome中效果很好,但在Firefox中效果很好。有一点错位。打印时,会在元素和:after选择器之间产生一个小的空白。

这是Firefox打印预览版的外观

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

我的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;
}

这是对上述代码的一个猛击 https://plnkr.co/edit/oll1ooap2mKC1EQo0n84?p=preview .

如何在所有浏览器中正确对齐?

2 回复 | 直到 7 年前

AG_ 7 年前

使用相等的值 left , border-right border-bottom ,也没有什么比 .5px . 使用 line-height 使文本垂直对齐。

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>

djmayank 7 年前

拿 http://dowebsitesneedtolookexactlythesameineverybrowser.com/
使用它们(别忘了验证HTML和CSS,并删除JS)
确保使用标准模式

虽然你的代码是对的,但它在chrome上运行得很好。一定要在这里检查,

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

HTML:

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

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

希望有帮助。