爲什麼我的CSS形狀被切斷

的jsfiddle：https://jsfiddle.net/ow1rnt4m/爲什麼我的CSS形狀被切斷

我的HTML：

<!DOCiTYPE html> 
<html> 
<head> 
    <title>Bootstrap Theme Simply Me</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="../css/bootstrap.min.css"> 
    <link rel="stylesheet" href="../css/custom_css/custom.css"> 
</head> 

<body> 
    <div class="container-fluid logo"> 
     <div class="row"> 
      <div class="col-xs-12 logo-img affix"></div> 
     </div> 
    </div> 
    <div class="container-fluid main"> 
     <div class="page-header row header"> 
      <h3>Welcome to the universe</h3> 
     </div> 
     <p>Welcome to my webpage. I'm glad to show off myself in a common egocentric manner.</p> 
     <div class="col-xs-12 col-sm-6"> 
      <p>Lorem Ipsum dolor kram dinge. Lorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dinge</p> 
     </div> 
     <div class="col-xs-12 col-sm-6"> 
      <p>Bla bla bla bl Bla bla bla blBla bla bla bl Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bl 
       Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bl 
       Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bl 
       Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bl 
       Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bla</p> 
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="../js/custom/init.js"></script> 
    <script src="../js/custom/events.js"></script> 
</body> 

<footer class="container-fluid footer"> 
    <div class="nav"> 
     <div class="col-xs-12 logo-footer"> 
      <img class="img-responsive footer-img pull-right" src="me (copy).png" alt="Patrick C. Höfer" width="100px" height="100px"> 
     </div> 
    </div> 
</footer> 
</html>

我的CSS：

body{ 
    background-color: #0099cc; 
} 

.logo-header { 
    background: transparent; 
    height : 100px; 
} 

.logo-img{ 
    padding-left: 0px; 
    z-index: 1; 

    /* animation setup */ 
    transform-style: preserve-3d; 
    transform : rotateX(-90deg); 
    transition: 1s; 
    transform-origin: 0% 0%; 

    /* triangle draw */ 
    width : 0px; 
    height : 0px; 
    border-style: solid; 
    border-width: 100px 100px 0 0; 
    border-color: #000000 transparent transparent transparent; 
} 

.logo-footer{ 
    z-index: 1; 
    padding-right: 0px; 

    /* animation setup */ 
    transform-style: preserve-3d; 
    transform: rotateX(90deg); 
    transition: 1s; 
    transform-origin: 0% 100%; 
} 

.main { 

} 

.nav { 
    position:fixed; 
    padding-left: 0px; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    margin-bottom:0px; 
} 

/* functional classes */ 

.mirror{ 
    transform : rotateX(0deg); 
}

在的jsfiddle它的工作原理 - 在三角看起來很完美但是，當我在Chrome中調試它時，我有一些奇怪的行爲。底部邊緣似乎被切斷，我不明白爲什麼？

來源

2016-08-13 xetra11

您鏈接的的jsfiddle似乎只工作，因爲它不能做的相對進口，如../css/bootstrap.min.css。如果您將bootstrap.min.css作爲外部資源添加，則它與您的屏幕截圖中顯示的相同。

你可以開始通過改變你.mirror類的CSS來解決這個問題：

.mirror { 
    transform: rotateX(0deg); 
    position: relative; 
    padding-right: 0; 
}

來源

2016-08-13 07:55:45 Karin

謝謝你 - 你能也許解釋一下爲什麼是這樣的解決方案，哪些問題是以前？ – xetra11

爲什麼我的CSS形狀被切斷

回答

相關問題