為什么我的CSS Shape被剪掉

Question

JSFiddle ： https : //jsfiddle.net/ow1rnt4m/

我的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中調試它時，我會有一些奇怪的行為。 底部邊緣似乎被切斷了，我不知道為什么？

Answer 1

您鏈接的jsfiddle似乎只能工作，因為它無法完成相對導入，例如../css/bootstrap.min.css 。 如果將bootstrap.min.css添加為外部資源，則該外觀與屏幕快照中的外觀相同。

您可以通過將.mirror類的css更改為以下內容來解決此問題：

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

為什么我的CSS Shape被剪掉

問題描述

1 個解決方案

解決方案1
1 已采納 2016-08-13 07:55:45

為什么我的CSS Shape被剪掉

問題描述

1 個解決方案

解決方案1 1 已采納 2016-08-13 07:55:45

解決方案1
1 已采納 2016-08-13 07:55:45