Question

通过向您展示一个例子来解释我想要实现的目标要容易得多。

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

    
    <div></div>

我想在右上角和左下角之间绘制一条尖锐的直线（点对点）。如何使用border-radius？

Answer 1

这是你想要的结果吗？在这里做了太多的定位。

＆＃13;

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);
}

＆＃13;

<div></div>

＆＃13;

Answer 2

试试这个：

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

<div></div>

Answer 3

您是否尝试制作带边框的直角三角形？

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

不可否认，这是一个古怪的方式来达到你所追求的目标，因为它需要一些精确的操作才能看起来正确 - 尽管它是单向的，只使用CSS来实现你的目标。

Answer 4

您认为SVG是一种可行的解决方案吗？

＆＃13;

<!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>

＆＃13;

锋利的边缘只有HTML和CSS

4 个答案: