为什么我的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形状被切断

回答

相关问题