如何使用css skew
如何使用css skew
提问于 2016-10-31 20:38:13
我怎么能做出这样的东西呢？
我正在尝试做与图片中相同的操作，但它现在起作用了。
我的html看起来像这样：
<div class="how-we-do">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia cum necessitatibus eveniet quisquam architecto harum iure aliquid, odit hic quasi assumenda omnis sequi optio nisi sit delectus dicta tenetur officiis?</p>
</div>
<div class="right">
</div>
</div>和我的css如下：
.left{
background-color:blue;
transform: skew(-10deg);
width: 500px;
}这是我的笔：http://codepen.io/Sidney-Dev/pen/gwNEve希望你能帮上忙。
回答 2
Stack Overflow用户
发布于 2016-10-31 20:44:25
要调整您的内容，可以用一个正值包装另一个div元素。您在图像中看到的内容可以通过背景图像来完成。
Codepen：http://codepen.io/anon/pen/yadwwL
HTML
<div class="how-we-do">
<div class="left">
<div class="inner-left">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia cum necessitatibus eveniet quisquam architecto harum iure aliquid, odit hic quasi assumenda omnis sequi optio nisi sit delectus dicta tenetur officiis?</p>
</div>
</div>
<div class="right">
<div class="inner-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia cum necessitatibus eveniet quisquam architecto harum iure aliquid, odit hic quasi assumenda omnis sequi optio nisi sit delectus dicta tenetur officiis?</p>
</div>
</div>
</div>CSS
* {
box-sizing: border-box;
}
.how-we-do {
width: 70%;
margin: 0 auto;
}
.left, .right {
float: left;
}
.left{
width: 50%;
padding: 2rem;
background-color:blue;
transform: skew(-10deg);
width: 500px;
}
.inner-left{
transform: skew(10deg);
}
.right{
width: 50%;
padding: 2rem;
background-color:red;
transform: skew(-10deg);
width: 500px;
}
.inner-right {
transform: skew(10deg);
}Stack Overflow用户
发布于 2017-03-15 22:37:16
CSS偏斜不是你想要的。你想要CSS形状。
CSS专家Sara Soueidan写了一篇关于它们的blog post，里面有很多例子。Clippy是计算多边形坐标的一个很好的工具。
body{
margin: 0;
padding: 0;
background: #2f73bc;
font-size: .5em; /*extra small for SO's little preview box*/
}
article {
font-family: 'Open Sans', sans-serif;
color: #fff;
margin: 0;
position: relative;
padding-top: 1em;
box-sizing: border-box;
text-align: right;
}
.gray {
-webkit-clip-path: polygon(39% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(39% 0, 100% 0, 100% 100%, 0 100%);
shape-outside: polygon(39% 0, 100% 0, 100% 100%, 0 100%);
background: #d7d7d7;
overflow: hidden;
width: 60%;
height: 100%;
height: 100vh;
box-sizing: border-box;
float: right;
shape-margin: 2%;
}
h1 {
font-weight: normal;
font-size: 2em;
}
h1 span{
font-weight: bold;
}
h3 {
font-weight: normal;
text-transform: uppercase;
}
p{font-size: .9em;}
/*buttons*/
article div{position: relative;}
button {
border: none;
font-size: 3em;
width: 100px;
line-height: 100px;
border-radius: 50%;
background: #fff;
color: #2f73bc;
position: absolute;
top: 0;
margin-left: 5%;
/* right: 0; */
}<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,800" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="gray"></div>
<article><h1><span>WHAT</span> WE DO</h1>
<div>
<h3>Branding</h3>
<p>Simply scaling or moving elements around on <br> a flexible... READ MORE</p>
</div>
<div>
<h3>Navigation</h3>
<p>The site navigation is laid out in <br>different locations... READ MORE</p>
</div>
<div>
<h3>Content & grids</h3>
<p>A responsive website will scale headlines, images, <br> text and... READ MORE</p>
</div>
<div>
<h3>Calls to action</h3>
<p>Good responsive design considers the critical calls <br> to action... READ MORE</p>
</div>
</article>
</body>
下面是一个用按钮展示它的代码：http://codepen.io/StuffieStephie/full/bqodjW/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40342356
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号