Css html-将页面拆分为所需的div形状？
我正在尝试将页面拆分为不同的形状，如下图所示： 问题是，我试图创建div作为图像中的形状，这样我就可以将内容放入其中，通过更改css样式，可以更改颜色，并使用JavaScript为其提供效果， 在网上搜索时，我确实遇到一些网站喜欢创建CSS三角形，但这并不完全是我想要的，因为我无法将内容放入这样的分区中，也无法获得我需要的确切形状，我在想也许我可以通过元素获得这样的结果，但我真的不知道是否它的逻辑使用，而不是可以得到我想要的效果Css html-将页面拆分为所需的div形状？,css,html,canvas,Css,Html,Canvas,我正在尝试将页面拆分为不同的形状，如下图所示： 问题是，我试图创建div作为图像中的形状，这样我就可以将内容放入其中，通过更改css样式，可以更改颜色，并使用JavaScript为其提供效果， 在网上搜索时，我确实遇到一些网站喜欢创建CSS三角形，但这并不完全是我想要的，因为我无法将内容放入这样的分区中，也无法获得我需要的确切形状，我在想也许我可以通过元素获得这样的结果，但我真的不知道是否它的逻辑使用，而不是可以得到我想要的效果 有没有办法将Html页面分割成任何所需的形状？嗯，您可以使用cs
有没有办法将Html页面分割成任何所需的形状？嗯，您可以使用css3转换（旋转）： HTML: 当然，您应该应用其他样式（位置：绝对和其他） 更新： 复制并粘贴此代码以查看实时示例：
<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>
.包装纸{
边框：1px实心#ff8888；
高度：480px；
左：50%；
余量：-240px0-320px；
溢出：隐藏；
位置：绝对位置；
最高：50%；
宽度：640px；
}
.形状1{
-webkit变换：旋转（15度）；
-moz变换：旋转（15度）；
背景色：#fff；
边框：1px纯黑；
身高：50%；
左-25%；
位置：绝对位置；
最高：70%；
宽度：150%；
}
.形状1内容{
-webkit变换：旋转（-15度）；
-moz变换：旋转（-15度）；
左侧填充：230px；
}
.shape2{
-webkit变换：旋转（15度）；
-moz变换：旋转（15度）；
背景色：#fff；
边框：1px实心#88ff88；
底部：244px；
身高：100%；
位置：绝对位置；
右：50%；
宽度：100%；
}
.shape2内容{
-webkit变换：旋转（-15度）；
-moz变换：旋转（-15度）；
底部：10px；
位置：绝对位置；
右：10px；
}
.形状3{
-webkit变换：旋转（30度）；
-moz变换：旋转（30度）；
边框：1px实心#8888ff；
底部：40%；
身高：100%；
位置：绝对位置；
右：20%；
宽度：100%；
}
.形状3内容{
-webkit变换：旋转（-30度）；
-moz变换：旋转（-30度）；
底部：50%；
位置：绝对位置；
右：10px；
}
你好！
你好！
你好！
一个警告，虽然这可能是一个痛苦的背后做：-p形状将保持相同的大小，或他们需要扩大与内容？如果是的话，其他项目是否需要扩展？你能告诉我们你想要的文本在容器里是什么样子吗？你试过了吗？你能发布你的代码吗？@coldcoder:它们需要在鼠标事件中设置动画并展开。内容将是分散的有角度的SVG图形和div中的文本，我实际上还没有一个示例，但它可以是任何内容。我也可以使用不做任何动画和不扩展的形状，@suresh.g我还不知道如何划分我的页面，没有什么特别的，正如我所说，我遇到了[link]（www.）但是没有帮助，因为它只创建三角形，而不是div，我真的不知道元素是否是正确的选择，是否可以由元素完成…老实说，我不是画布专家，但看看他们的视图源，你可以看到正在工作的JS文件被注释掉了。他们最终把它缩小了。我建议查看，因为它支持不支持画布的旧浏览器。你会看到他有大量的例子，如果你学会了，你可以用它做什么是没有限制的。我认为这种方法有两个问题，首先，它是否适用于所有浏览器，其次，如图所示，divs将如何定义？@Farzan定义“所有浏览器”。ie9+@Jacky Qwerty对css3转换的支持：你能给我解释一下包装器部分是如何工作的吗，我真的不理解“边距：-240px 0-320px”部分吗？@Farzan：没关系，我只是想将示例框与屏幕中心对齐。但是您可以查看“overflow”属性，在本例中，它隐藏了块的不必要部分。
.shape1 {
-webkit-transform: rotate(45deg);
}
.shape1-content {
-webkit-transform: rotate(-45deg);
}
<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>