Fatal编程技术网
  • html/
  • Html 使用CSS实现捷径

Html 使用CSS实现捷径

html css

Html 使用CSS实现捷径,html,css,css-shapes,Html,Css,Css Shapes,我想“剪”一个div的左上角，就像你把一页的角折下来一样 我想用纯CSS制作，有什么方法吗？如果父元素有纯色背景，可以使用伪元素来创建效果： div{ 高度：300px； 背景：红色； 位置：相对位置； } 部门：以前{ 内容：''； 位置：绝对位置； 顶部：0；右侧：0； 边框顶部：80像素纯白； 左边框：80px实心红色； 宽度：0； } 通过对Joseph的代码进行少量编辑，元素不需要坚实的背景： div { height: 300px; background: url(

我想“剪”一个div的左上角，就像你把一页的角折下来一样

我想用纯CSS制作，有什么方法吗？

如果父元素有纯色背景，可以使用伪元素来创建效果：

div{
高度：300px；
背景：红色；
位置：相对位置；
}
部门：以前{
内容：''；
位置：绝对位置；
顶部：0；右侧：0；
边框顶部：80像素纯白；
左边框：80px实心红色；
宽度：0；
}
通过对Joseph的代码进行少量编辑，元素不需要坚实的背景：

div {
    height: 300px;
    background: url('http://images2.layoutsparks.com/1/190037/serene-nature-scenery-blue.jpg');
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid rgba(0,0,0,0);
    width: 0;
}

使用“rgba（0,0,0,0）”可以使内部“角”不可见

您还可以编辑第四个参数“a”，其中0，使阴影具有更多的“折叠角”效果：

（带阴影）

注意：RGBA颜色值在IE9+、Firefox 3+、Chrome、Safari和Opera 10+中都受支持。

通过对Joshep的代码进行少量修改，您可以使用此代码，它看起来像是根据您的要求折叠起来的右角

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid blue;
    width: 0;
}
您可以使用
线性渐变
。假设父级
div
有一个背景图像，您需要一个
div
来坐在上面，背景为灰色，左角有一个尖角。你可以这样做：

.parent-div { background: url('/image.jpg'); }
.child-div { 
   background: #333;
   background: linear-gradient(135deg, transparent 30px, #333 0);
}

进一步阅读：

如果您需要一个透明的剪切边，您可以使用一个旋转的伪元素作为
div的背景
，并将其定位以剪切所需的角点：

正文{
背景：url(http://i.imgur.com/k8BtMvj.jpg);
背景尺寸：封面；
}
div{
位置：相对位置；
宽度：50%；
保证金：0自动；
溢出：隐藏；
填充：20px；
文本对齐：居中；
}
部门：之后{
内容：''；
位置：绝对位置；
宽度：1100%；高度：1100%；
顶部：20px；右侧：-500%；
背景：rgba（255255,8）；
变换原点：54%0；
变换：旋转（45度）；
z指数：-1；
}

... 内容…
。。。内容…
。。。内容…
。。。内容…
。。。内容…
。。。内容…
。。。内容…
。。。内容…
。。。内容…
。。。内容…
如果需要对角边框而不是对角点，可以使用伪元素堆叠2个div：

演示

.container{
填充：100px 200px；
溢出：隐藏；
}
等分对角线{
背景：#da1d00；
颜色：#fff；
字体系列：Arial、Helvetica、无衬线字体；
宽度：300px；
高度：300px；
填充：70px；
位置：相对位置；
利润率：30像素；
浮动：左；
}
对角线2等分{
背景：#da1d00；
颜色：#fff；
字体系列：Arial、Helvetica、无衬线字体；
宽度：300px；
高度：300px；
填充：70px；
位置：相对位置；
利润率：30像素；
背景：#da1d00 url(http://www.remcokalf.nl/background.jpg)左上；
背景尺寸：封面；
浮动：左；
}
对角线3等分{
背景：#da1d00；
颜色：#da1d00；
字体系列：Arial、Helvetica、无衬线字体；
宽度：432px；
身高：432px；
填充：4px；
位置：相对位置；
利润率：30像素；
浮动：左；
}
舱内{
背景：#fff；
颜色：#da1d00；
字体系列：Arial、Helvetica、无衬线字体；
宽度：292px；
身高：292px；
填充：70px；
位置：相对位置；
}
对角线分割：之前，
第2部分对角线：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
边框顶部：80px实心#fff；
右边框：80px实心透明；
宽度：0；
}
第3节对角线：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
边框顶部：80px实心#da1d00；
右边框：80px实心透明；
宽度：0；
z指数：1；
}
内部分区：之前{
内容：''；
位置：绝对位置；
顶部：-4px；
左：-4px；
边框顶部：74px实心#fff；
右边框：74px实心透明；
宽度：0；
z指数：2；
}
氢{
字体大小：30px；
线高：1.3em；
边缘底部：1米；
位置：相对位置；
z指数：1000；
}
p{
字体大小：16px；
线高：1.6em；
边缘底部：1.8em；
}
#灰色的{
宽度：100%；
高度：400px；
背景：#ccc；
位置：相对位置；
边缘顶部：100px；
}
#格雷：以前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
边框顶部：80px实心#fff；
右边框：80px固态#ccc；
宽度：400px；
}

标题
是的，CSS对角是可能的

标题
是的，有背景图像的CSS对角是可能的

标题
是的，CSS对角线边框甚至可以使用额外的div
CSS剪辑路径 使用a是一种新兴的替代方案。它开始得到越来越多的支持，现在已经有了很好的记录。因为它使用SVG来创建形状，所以它是直接响应的

div{
宽度：200px；
最小高度：200px；
-webkit剪辑路径：多边形（0,0,100%，100%100%，100%25%，75%0）；
剪辑路径：多边形（0,0,100%，100%100%，100%25%，75%0）；
背景：浅蓝色；
}

一些文本
这里是另一种使用CSS
变换的方法：倾斜（45度）
来产生切角效果。形状本身包含三个元素（1个实元素和2个伪元素），如下所示：

  • 主容器
    div
    元素具有
    overflow:hidden
    ，并生成左边框
  • ：before
    伪元素，它是父容器高度的20%，并应用了倾斜变换。此元素在顶部显示边框，在右侧显示剪切（倾斜）边框
  • ：在
    伪元素之后，伪元素是父元素高度的80%（基本上是剩余高度），并生成底部边框，即右边框的剩余部分
产出 
div {
  display:block;
  height: 300px;
  width: 200px;
  background: url('http://lorempixel.com/180/290/') no-repeat;
  background-size:cover;

  -webkit-clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

<!DOCTYPE html>
<html lang ="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css"> 
    </head>
    <body>
        <div class="folders">
            <div class="container">
                <div class="triangleOne">
                    <p class="folderNames">Home</p>
                </div>
                <div class="triangleOneCut">
                </div>
                <div class="triangleOneFill">
                </div>
            </div>

            <div class="container2">
                <div class="triangleOne blue">
                    <p class="folderNames">About</p>
                </div>
                <div class="triangleOneCut blueCut">
                </div>
                <div class="triangleOneFill blue">
                </div>
            </div>

            <div class="container3">
                <div class="triangleOne green">
                    <p class="folderNames">Contact</p>
                </div>
                <div class="triangleOneCut greenCut">
                </div>
                <div class="triangleOneFill green">
                </div>
            </div>
        </div>
    </body>
</html>

.triangleOne {
    height: 50px;
    width: 40px;
    background: red;
    border-radius: 5px 0px 0px 5px;
    position: absolute;
}

.triangleOneCut {
    content: '';
    position: absolute;
    top: 0; left: 40px;
    border-top: 10px solid transparent;
    border-left: 10px solid red;
    width: 0;
}

.triangleOneFill {
    content: '';
    position: absolute;
    top: 10px; left: 40px;
    width: 10px;
    height: 40px;
    background-color: red;
    border-radius: 0px 0px 5px 0px;
}

.container {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    z-index: 3;
}

.container2 {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    left: -10px;
    z-index: 2;
}

.container3 {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    left: -20px;
    z-index: 1;
}

.blue {
    background-color: blue;
}

.green {
    background-color: green;
}

.blueCut {
    border-left: 10px solid blue;
}

.greenCut {
    border-left: 10px solid green;
}

.folders {
    width: 160px;
    height: 50px;
    /* border: 10px solid white; */
    margin: auto;
    padding-left: 25px;
    margin-top: 100px;
}

.folderNames {
    text-align: right;
    padding-left: 2px;
    color: white;
    margin-top: 1.5px;
    font-family: monospace;
    font-size: 6.5px;
    border-bottom: double 1.5px white;
}

<div class="background">
  <div class="container">Hello world!</div>
</div>

.background {
  position: relative;
  width: 50px;
  height: 50px;
  border-right: 150px solid lightgreen;
  border-bottom: 150px solid lightgreen;
  border-radius: 10px;
}
.background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 25px solid lightgreen;
  border-top-color: transparent;
  border-left-color: transparent;
}
.container {
  position: absolute;
  padding-left: 25px;
  padding-top: 25px;
  font-size: 38px;
  font-weight: bolder;
}

@mixin cut-corners ($left-top, $right-top: 0px, $right-bottom: 0px, $left-bottom: 0px) {
  clip-path: polygon($left-top 0%, calc(100% - #{$right-top}) 0%, 100% $right-top, 100% calc(100% - #{$right-bottom}), calc(100% - #{$right-bottom}) 100%, $left-bottom 100%, 0% calc(100% - #{$left-bottom}), 0% $left-top);
}

.cut-corners {
  @include cut-corners(10px, 0, 25px, 50px);
}