html -s将一个页面分割成所需的形状作为div？ [英] html -split a page into desired shapes as divs?
问题描述
我尝试将页面拆分为不同的形状，如下图所示：
I'm trying to split a page into different shapes, as shown in this image:
问题是我想创建divs作为图像中的形状，所以我可以把它们的内容，通过改变CSS样式改变他们的颜色并给它们效果与JavaScript，
搜索网络我遇到了一些网站，如 CSS Tricks 来创建CSS三角形，但这不是我想要的，因为我不能把内容放在这样的div，无法得到完全我需要的形状，我想也许我可以得到这样的结果与元素，但我真的不知道它的逻辑使用，而不是，可以得到我想要的效果吗？
The problem is I'm trying to create divs as the shapes in the image so I can put content in them and by changing the css styles change their colors and give them effects with JavaScript, Searching the net I did come across some sites like CSS Tricks to create CSS Triangles, but that's not exactly what I want because I cant put content in such a div and cant get exactly the shapes I need, I was thinking maybe I could get such results with the element, but i don't really know if its logical to use instead of and can get the effect I want?
有一种方法来划分一个Html页面
is there a way to divide an Html page into any desired shape?
推荐答案
您可以使用css3 transformations（rotation）：
hmm, you can use css3 transformations (rotation):
HTML：
<div class="shape1">
<div class="shape1-content"> ... </div>
</div>
CSS：
.shape1 {
-webkit-transform: rotate(45deg);
}
.shape1-content {
-webkit-transform: rotate(-45deg);
}
当然，你应用其他样式（位置：绝对和其他） 。
Of course, you shoud apply other styles (position: absolute, and others).
更新：
复制并粘贴此代码以查看活动示例：
copy'n'paste this code to see live example:
<html>
<head>
<style>
.wrapper {
border: 1px solid #ff8888;
height: 480px;
left: 50%;
margin: -240px 0 0 -320px;
overflow: hidden;
position: absolute;
top: 50%;
width: 640px;
}
.shape1 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
background-color: #fff;
border: 1px solid black;
height: 50%;
left: -25%;
position: absolute;
top: 70%;
width: 150%;
}
.shape1-content {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
padding-left: 230px;
}
.shape2 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
background-color: #fff;
border: 1px solid #88ff88;
bottom: 244px;
height: 100%;
position: absolute;
right: 50%;
width: 100%;
}
.shape2-content {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
bottom: 10px;
position: absolute;
right: 10px;
}
.shape3 {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
border: 1px solid #8888ff;
bottom: 40%;
height: 100%;
position: absolute;
right: 20%;
width: 100%;
}
.shape3-content {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
bottom: 50%;
position: absolute;
right: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="shape3">
<div class="shape3-content">Hi there!</div>
</div>
<div class="shape1">
<div class="shape1-content">Hi there!</div>
</div>
<div class="shape2">
<div class="shape2-content">Hi there!</div>
</div>
</div>
</body>
</html>
这篇关于html -s将一个页面分割成所需的形状作为div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
