使用::之前的伪元素溢出的父元素的高度

我尝试创建一个对话框，其顶角和底角与父元素的角相同。

伪元件道具，

.callout::before { 
     box-sizing: border-box; 
     height: 100%; 
     content: ""; 
     position: absolute; 
     right: -0.2em; 
     padding: 1em; 
     background: inherit; 
     border: inherit; 
     border-right: 0; 
     border-bottom: 0; 
     transform: rotate(45deg); 
     z-index: -1; 
    }

我看到的问题，

1）伪元件不被裁剪到父元素的高度

2）伪元件是不完全从始发顶部，母元素的右上角

看起来像，

如何修复它？

来源

2016-09-02 Madhavan Kumar

您是如何希望它看起来 – snit80

这将是很难用一个适当的寻找钻石，如'高度相对值来获得：100％;'令人信服地做到这一点，你需要或者使用边框三角形，或者使用div的高度设置值，然后设置钻石高度和宽度的值。 – Scott

你是这个意思吗？ [小提琴]（http://codepen.io/anon/pen/PGoOgo） –

让我们假设父元素的高度为x。因为您正在使用::before元素通过将其旋转到45deg来显示箭头，所以箭头的对角线应该等于父元素的高度。对角线的公式是side * sqrt(2)。所以，

x = side * sqrt(2) 

=> side = x/sqrt(2)

假设，x = 50，然后side会35.35534。因此，采用同样的在你的提琴：

div { 
    width: 100px; 
    height: 50px; 
    background: tomato; 
    position: relative; 
} 

div::before { 
    content: ""; 
    display: block; 
    width: 35.35534px; 
    height: 35.35534px; 
    background: blue; 
    position: absolute; 
    transform: rotate(45deg); 
    transform-origin: 0 0; 
    left: 100%; 
}

更好的方式是去同一个CSS预处理器像SASS。这里是我用sass来获得结果的代码。

Working Fiddle

来源

2016-09-02 09:15:30

使用::之前的伪元素溢出的父元素的高度

回答

相关问题