只有HTML和CSS的尖锐边缘

通过向您展示示例，更容易解释我想要实现的目标。只有HTML和CSS的尖锐边缘

div{ 
 
     width:100px;height:100px; 
 
     border:3px solid #900; 
 
     border-radius:0px 0px 140px 0px; 
 
    }

 
 
    <div></div>

我想提请右上和左下角之间的尖锐，直接线（点至点）。我如何用border-radius来做到这一点？

来源

2017-04-14 lippr

你想做一个半圈？ – disinfor

@disinfor号我想在两条边之间划一条线：右上角和左下角 – lippr

您可以上传您正在尝试做什么的图片吗？ – disinfor

你试图与边框的直角三角形？

div { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 200px 200px 0 0; 
 
    border-color: #007bff transparent transparent transparent; 
 
    position: relative; 
 
} 
 

 
div::before { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 182px 182px 0 0; 
 
    border-color: white transparent transparent transparent; 
 
    content: ''; 
 
    display: block; 
 
    top: -195px; 
 
    left: 5px; 
 
    position: absolute; 
 
    z-index: 2; 
 
}

<div></div>

诚然，这是是一个有点古怪的方式来获得你以后，因为它需要一些精确的操作，以看起来是正确的 - 尽管这是一个办法，只有用CSS，来实现你的目标。

来源

2017-04-14 15:14:03 Santi

@lippr - 当我问到“它是否必须是边界半径？”时，这是我想到的解决方案，并且您说是 - 但您已接受此答案。（@santi - 支持你，我认为这是一个很有效的创造性解决方案） –

试试这个：

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 3px solid #900; 
 
    border-radius: 140px; 
 
    border-top-left-radius: 0px; 
 
    border-bottom-right-radius: 0px; 
 
}

<div></div>

来源

2017-04-14 15:05:18

如果你想要它更多的是一个矩形，然后改变边界半径从140px到更少。 –

这是你想要的结果..还挺这里做太多的定位。

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-top: 3px solid #900; 
 
    border-left: 3px solid #900; 
 
    position: absolute; 
 
} 
 

 
div:after { 
 
    content: ''; 
 
    width: 144px; 
 
    height: 3px; 
 
    background: #900; 
 
    position: absolute; 
 
    display: inline-block; 
 
    top: 47px; 
 
    left: -23px; 
 
    transform: rotate(-45deg); 
 
}

<div></div>

来源

2017-04-14 15:13:34

你认为SVG是一个可行的解决方案吗？

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>SVG demo</title> 
 
</head> 
 
<body> 
 
    <svg width="100" height="100"> 
 
    <polygon points="0,0 100,0 0,100" style="fill:white;stroke:red;stroke-width:3;" /> 
 
    </svg> 
 
</body> 
 
</html>

来源

2017-04-14 15:16:49 Badacadabra

只有HTML和CSS的尖锐边缘

回答

相关问题