Why is my CSS Shape being cut off

Question

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

My 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>

My 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);
}

In JSFiddle it works - the triangle looks perfect. But when I debug it in chrome I have some weird behaviour. The bottom edge seems to be cut off and I cannot figure out why?

Answer 1

The jsfiddle you linked only appears to work because it can't do the relative imports, such as ../css/bootstrap.min.css . If you add bootstrap.min.css as an external resource, it appears the same as in your screenshot.

You can begin to fix this by changing the css of your .mirror class to:

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

Why is my CSS Shape being cut off

Question

1 answers

solution1
1 ACCPTED 2016-08-13 07:55:45

Why is my CSS Shape being cut off

Question

1 answers

solution1 1 ACCPTED 2016-08-13 07:55:45

solution1
1 ACCPTED 2016-08-13 07:55:45