Firefox-CSS：伪元素“之前”的边界半径问题答案

【问题标题】：Firefox-CSS: border-radius issue for pseudo-element "before"Firefox-CSS：伪元素“之前”的边界半径问题
【发布时间】：2018-11-11 11:59:12
【问题描述】：

我有一个正面和背面的卡片元素（bootstrap-4），悬停时显示背面。为了创建“折叠角效果”，我在正面卡片上使用了一个伪元素(:before)，它适用于除 firefox 之外的所有浏览器。

伪元素的左下角也应该是圆角的，所以我设置了一个border-radius。不幸的是，在 Firefox 中，角不是圆的，而是在伪元素中显示了一个奇怪的框。

任何想法是什么导致了 Firefox 中的这个问题？我已经玩过定位、z-index、溢出等，但我找不到根本原因。

提前非常感谢！！

https://jsfiddle.net/rbv5ob20/

HTML：

.card {
  color: white;
  border: transparent;
  border-radius: 10px;
  -webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
  box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}

.front,
.back {
  width: 100%;
  height: 150px;
  background: #99d0e9;
  opacity: 1;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 10px 0px 10px 10px;
}

.front {
  position: absolute;
  left: 0;
  z-index: 1;
  opacity: 1;
  text-align: left;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.front::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  border-width: 0px 25px 25px 0px;
  border-style: solid;
  border-color: transparent #f6f6f6 #32a2d4 transparent;
  border-bottom-left-radius: 10px;
}

.back {
  background: #32a2d4;
  opacity: 1;
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  text-align: right;
  border-top-right-radius: 10px;
  display: block;
}

.card:hover .back {
  -webkit-transform: rotateY(0);
  -ms-transform: rotateY(0);
  transform: rotateY(0);
}

.card:hover .front {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

<section id="offering" style="background-color:#f6f6f6;">
  <div class="container">

    <div class="col-4 text-center">

      <div class="card">
        <div class="front">
          this is front...
        </div>
        <div class="back">
          this is back
        </div>
      </div>

    </div>
  </div>
</section>

【问题讨论】：

最好使用triangle的SVG path。

标签： css debugging firefox bootstrap-4 pseudo-element

【解决方案1】：

在 Firefox 中，border-radius 似乎无法正确应用于 width 和 height 为 0 的元素。可能的解决方法是使用 overflow: hidden 和 border-radius 制作包装器独立：

.roundArrow {
  border-radius: 0 0 0 10px;
  width: 50px;
  height: 50px;
  overflow: hidden;
}

.roundArrow:after {
  content: "";
  display: block;
  top: 0px;
  right: 0px;
  border-width: 0px 50px 50px 0px;
  border-style: solid;
  border-color: transparent #f6f6f6 #32a2d4 transparent;
}

&lt;div class="roundArrow"&gt;&lt;/div&gt;

【讨论】：

@schlaumi2001 很高兴我能帮上忙！

【解决方案2】：

<!DOCTYPE html>
<html lang="en">
<head>
  
  <style>
      .card {
color: white;
border: transparent;
border-radius: 10px ;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}

.front, .back {
width: 100%;
height:150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}

.front {
position: absolute;
left: 0;
z-index: 1;
opacity:1;
text-align:left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}

.front::before {
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      border-bottom-left-radius: 10px;
      height: 25px;
      width: 25px;
      background: #32a2d4;
}

.front::after {
    content: "";
    position: absolute;
    top: -11px;
    right: -17px;
    height: 28px;
    width: 35px;
    background: white;
    transform: rotate(45deg);
}

.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align:right;
border-top-right-radius: 10px;
display: block;
}

.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}

.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
  </style>
</head>
<body>
      <section id="offering" style="background-color:#f6f6f6;">
            <div class="container">
        
                    <div class="col-4 text-center"> 
        
                        <div class="card">
                            <div class="front">
                                this is front...
                            </div>
                            <div class="back">
                                this is back
                            </div>                      
                        </div>
        
                    </div>      
            </div>
        </section>
</body>
</html>

::before 伪元素的以下更改可能对您有用，您还必须为此解决方案添加::after 伪元素。

.front::before {
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      border-bottom-left-radius: 10px;
      height: 25px;
      width: 25px;
      background: #32a2d4;
}

.front::after {
    content: "";
    position: absolute;
    top: -11px;
    right: -15px;
    height: 25px;
    width: 35px;
    background: white;
    transform: rotate(40deg);
}

【讨论】：

谢谢，但是通过这种手动定位第二个项目我遇到了更多问题，其他解决方案对我来说效果更好。