三角定位

Question

您好，我希望与此图片类似。

这是我的css代码

*{
    background:#444;
    margin:0;
    padding:0;
}
.display{
    width:100%;
    min-height:100%;
    background:green;
    position:fixed;
}
.one{
    width:100%;
    height:300px;
    margin-top:-200px;
    background:red;
    transform: rotate(45deg);
}
.two{
    width:100%;
    height:450px;
    margin-top:200px;
    background:blue;
    transform: rotate(45deg);
}

我尝试在此处实现类似的定位是我的代码是here

我的问题是 - 你有什么建议我实现类似的定位？

使用4个div图像的变换并定位它们是否合适？

Answer 1

假设这是一个背景，让我们用一个HTML元素简化它。

• 顶部和底部背景颜色是具有两种颜色的单个渐变

• 左右背景颜色为:before，:after伪元素随transform: rotate

旋转

• 前后伪元素获得z-index: 1。应位于其上方的元素会获得position: relative和z-index: 2

实施例

＆＃13;

＆＃13;

body {
  background: #212121;
}
div {
  background: #F00;
  height: 500px;
  width: 500px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #EB1249 0%, #EB1249 50%, #251F39 50%, #251F39 100%);
  margin: 0 auto;
}
div:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -70%;
  transform: rotate(45deg);
  background: #fce4ec;
  width: 100%;
  height: 100%;
  z-index: 1;
}
div:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: -59.3%;
  transform: rotate(45deg);
  background: #F5B8A2;
  width: 90%;
  height: 100%;
  z-index: 1;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果将transform-origin设置为方框的角落，这非常简单。基本上，您可以从角落旋转，而不是从中间旋转。所以你有两个方框，例如：

right  : 200px;
bottom : 200px;
transform-origin : 100% 100%;

一个旋转45度，另一个-45度。然后另外两个在190, 210或其他两个。请注意，您还需要-webkit-transform-origin，-ms-transform-origin，-moz-transform-origin，-o-transform-origin