如何使用另一个 div 作为带有文本的内容制作响应式反转 div

Question

我有一个 div，它是反转的，它的边界半径为 20% 我想知道我怎样才能让它负责，这是这个的最佳实践。你可以告诉我，我自己做。

我试图向您展示我想要达到的响应能力。另外，另一个问题是如何让内部 div 触摸橙色 div 的边。

    div (orange block)
    .rotate {
        width: 130vh;
        height: 130%;
        background-color: white;
        transform: var(--rotate);
        border-radius: var(--border-radius);
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    content (red block)
    .rotateBlockContent {
        width: 95vh;
        height: 60%;
        border-radius: var(--border-radius);
        transform: rotate(-45deg); reversed since .rotate div is reversed
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

我想知道如何让它对移动设备友好，因为我是用媒体查询做到的，我有 100500 个媒体查询。它只是硬编码，不能像我希望的那样工作。也许你们中的一些人知道最佳实践，如何开发一个良好的网站响应式设计，或者如果你有一些关于我可以在哪里查看的信息，请分享。谢谢。

Answer 1

我会以不同的方式做，使用 clip-path 来模拟旋转的元素：

.box {
  background: orange;
  max-width: 400px;
  margin: auto;
  display: flex;
  height: 400px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.box::before,
.box::after {
  content:"";
  width:calc(100%/4);
}

.box>div {
  margin:calc(100%/4) 0;
  flex: 1;
  
  /* irrelevant styles */
  background: blue;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
}

<div class="box">
  <div> some content inside </div>
</div>

要保持比例，您可以通过对伪元素应用填充来更改固定高度：

.box {
  background: orange;
  max-width: 400px;
  margin: auto;
  display: flex;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.box::before,
.box::after {
  content:"";
  width:calc(100%/4);
  padding-top:100%;
}

.box>div {
  flex: 1;
  margin:calc(100%/4) 0;
  
  /* irrelevant styles */
  background: blue;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
}

<div class="box">
  <div> some content inside </div>
</div>

如果你想要半径，我们添加一个小的 SVG 过滤器：

.box {
  background: orange;
  max-width: 400px;
  margin: auto;
  display: flex;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.box::before,
.box::after {
  content: "";
  width: calc(100%/4);
  padding-top: 100%;
}

.box>div {
  flex: 1;
  margin: calc(100%/4) 0;
  
  background: blue;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div style="filter: url('#goo');">
  <div class="box">
    <div> some content inside </div>
  </div>
</div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

如何使用另一个 div 作为带有文本的内容制作响应式反转 div

How to make a responsive reversed div with another div as a content with text

html

css

responsive