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

我嘗試創建一個對話框，其頂角和底角與父元素的角相同。

僞元件道具，

.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

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

回答

相關問題