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 中它有效——三 Angular 形看起来很完美。 但是当我在 chrome 中调试它时，我有一些奇怪的行为。底部边缘似乎被切断了，我不明白为什么？
最佳答案
您链接的 jsfiddle 似乎只能工作，因为它无法执行相关导入，例如 ../css/bootstrap.min.css。如果添加 bootstrap.min.css作为外部资源，它看起来与您的屏幕截图中的相同。
您可以通过将 .mirror 类的 css 更改为:
.mirror {
transform: rotateX(0deg);
position: relative;
padding-right: 0;
}
关于javascript - 为什么我的 CSS Shape 被 chop 了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38930411/