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 个答案: