Question

我正在尝试在右侧有一个对角线边框的HTML页面。嗯，实际上它在一个实线边框旁边有一个半透明边框（以回显其他页面上的一些设计元素）。我创建这条线的方法是通过两个稍微旋转的矩形，一个在：之前，一个在：伪元素之后。

{
  "name": "quill",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "fine-uploader": "^5.16.2",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-quill": "^1.2.7",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

我想我可以使用SVG形状，但我认为这需要很长时间才能进行微调，特别是因为页面长度需要是动态的（应该能够在400像素到大约1500之间）像素）。

我试图使用overflow-y：hidden但是这会在x轴上产生滚动条，部分原因是设计还需要使用全浏览器宽度的条形图（参见https://css-tricks.com/full-browser-width-bars/）

救援的剪辑路径！嗯，不幸的是并不完全。剪辑路径会删除我不需要的矩形底部的位，但不幸的是仍然将这些位计算到页面的长度，这意味着我的页脚下方有一个空隙。

这里是分配给父容器的剪辑路径代码...

#header_block_unlimited:before { 
  content: '';
  position: absolute;
  width: 50%;
  height: 130%;
  right: -38.5%;
  top: -10%;
  bottom: -10%;
  background-color: rgb(255, 255, 255); /* fallback */
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  transform: rotate(5deg);
}

#header_block_unlimited:after { 
  content: '';
  position: absolute;
  width: 50%;
  height: 130%;
  right: -40%;
  top: -10%;
  bottom: -10%;
  background-color: #F95E62;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  transform: rotate(5deg);
}

这里是codepen of the problem。

对此的任何帮助将不胜感激。理想的解决方案是裁剪旋转矩形的多余部分，以便它不会增加页面长度。或者，实现对角线RHS边界的其他方式。

Answer 1

而不是clip-path和复杂的转换，我会用一个简单的线性渐变来创建它：

＆＃13;

body {
  margin:0;
  height:100vh;
  background:linear-gradient(100deg, transparent 70%,#F95E62 70.5%);
}

＆＃13;

Answer 2

虽然我喜欢Temani Afif回答的简单性，但如果没有对角线模糊或像素化，我无法使其工作。

经过一番摆弄后，我能够使用从原始Adobe Illustrator图稿创建的SVG文件解决问题。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
height="1700px" width="300px" viewBox="0 14 300 1715">
/* Note that the SVG needs to have an implicit height and width
    to avoid problems in Firefox */
    <defs>
        <style>
            .cls-1{opacity:0.36;}
            .cls-2{fill:#fff;}
            .cls-3{fill:#f95e62;}
        </style>
    </defs>
    <title>Asset 3</title>
    <g class="cls-1">
        <polyline class="cls-2" points="167.05 13.28 8.5 1721 334 1721 334 1721 334 13"/>
    </g>
    <polyline class="cls-3" points="334 1721 334 13 197 13 40.25 1720.99"/>
</svg>

然后我将它添加到主容器div中的div中。

  <div id="header_triangle">
    <img src="[path to the svg]" />
  </div>

造型如下......

#header_triangle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 100; /* needs to sit on top */
}

#header_triangle img {
    height: 102%;
    float: right; /* to Fix an issue in FF */
}

这是working CodePen。

剪辑路径隐藏的元素仍会添加到页面长度

2 个答案: