計算高度大于代碼編輯器中指定的高度-有解無憂

我正在制作具有變換傾斜屬性的 3d 設計。但是當我給它高度時，li::before它顯示的高度大于 vs 代碼中給出的高度。您可以在片段中看到給定的高度為 98.4 像素，但在盒子模型中顯示的高度為 135 像素。

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');
*,*::before,*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
  color:white;
  font-family: 'Oswald', sans-serif;
}
a{
  text-decoration: none;
}

html, body {
  height: 100%;
  width: 100%;

}
body{
  background-color:#434750;
  display:flex;
  justify-content: center;
  align-items:center;
}
ul{
  font-size:1.2rem;
  transform: skewY(-15deg);
  
}
li{
  background-color: #3e3f46;
  list-style:none;
  padding:1em;
  position: relative;
}
li::before{
  content: "";
  position:absolute;
  width:50px;
  height:98.4px;
  background-color:#3e3f46;
  filter: brightness(0.7);
  top:0;
  left: -50px;
  display: block;
  transform-origin: right;
  transform: skewY(45deg);

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul>
        <li><a href = "#">Whats App</a></li>
        <li><a href = "#">Instagram</a></li>
        <li><a href = "#">Facebook</a></li>
        <li><a href = "#">Twitter</a></li>
      </ul>    
</body>
</html>

盒子模型

計算高度大于代碼編輯器中指定的高度

uj5u.com熱心網友回復：

這里的問題不在li::after. 當您關閉時，ul{ transform: skewY(-15deg); }您會看到高度li::after恢復到您指定的高度，例如 98.39px

當涉及到 3D 變換時，請始終考慮到這會對物件最終的大小產生間接影響。CSS 將指定元素的“原始”尺寸，并且該transform:skewY屬性會將高度更改為變換的最終結果。

所以用普通的英語：元素仍然是 98.40px，但是它的父元素（以及它自己）的 transform 屬性也會影響尺寸。

這可能不是最干凈的修復，但我建議您添加另一個屬性來li:nth-last-child()::before向上移動元素：

ul li:nth-last-child()::before { 
    transform: skewY(45deg)translateY(-30px);
}

它不值得任何美容價格，但它可以實作您想要實作的目標。請記住，盡管這會影響lia 中的所有 last ul，因此請考慮給它ul一個特定的類或識別符號以使 CSS 規則更加具體。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/508231.html

標籤：html css

上一篇：索引

下一篇：BoxLayout中可調整大小的JButton