CODEWITHSUNDEEP
htmlcss
lippr
lippr

Reputation: 21

Sharp edge with HTML and CSS only

It's much more easy to explain what I'm trying to achieve by showing you an example.

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

I want to draw a sharp, direct line(point-to-point) between top-right and bottom-left corners. How do I do this with border-radius?

enter image description here

Upvotes: 1

Views: 7229

Answers (4)

Badacadabra
Badacadabra

Reputation: 8497

Do you consider SVG as a viable solution?

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

Upvotes: 1

Tyler Roper
Tyler Roper

Reputation: 21672

Are you trying to make a right triangle with a border?

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>

Admittedly, this is is a bit of a wacky way to get to what you're after, as it requires some precise manipulation to look correct - though it's one way, using only CSS, to achieve your goal.

Upvotes: 1

Jones Joseph
Jones Joseph

Reputation: 4938

Is this your desired result.. Kinda too much positioning done here.

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>

Upvotes: 2

Cameron
Cameron

Reputation: 1067

Try this:

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

Upvotes: 0

Related Questions