How makes a diagonal border in css in three parts

Question

I'm trying to create this border in css :

I succeed to do this:

But it's not perfect because the little part in the middle of border, is curved and not straight. I don't know how to do it, with three change css, in same border.

.thing {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.thing::before,
.thing::after {
  content: '';
  z-index: 1;
  position: absolute;
}

.thing::before {
  border-top: 2px solid black;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  border-color: grey;
}

.thing::after {
  border-radius: 0%;
  left: 0%;
  right: 60%;
  height: 300px;
  border: 2px solid black;
  top: -234px;
  background-color: white;
  border-left: 0px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 150px 100px;
  border-color: grey;
}

html {
  margin: 3em;
}

<div class="thing"></div>

Could you help me ? Thanks in advance

maybe? https://stackoverflow.com/questions/19147241/skewed-borders-on-a-div — Dor-Ron, Feb 03 '21 at 06:54
check this out : https://stackoverflow.com/questions/51086086/css-skew-element-and-get-inner-rounded-border-top , hope that helps! — Nancy H., Feb 03 '21 at 08:38

F. Müller · Accepted Answer · 2021-02-03T10:14:31.527

This is quite a tricky one. The hard part is to connect the path. With my pure CSS solution below you have to fine-tune the result, I am afraid.

You may want to consider creating an SVG instead.

With an SVG

.container {
  width: 400px;
  height: auto;
}

.lines {
  stroke: #888888;
  stroke-width: 1px;
  stroke-opacity: 1;
  fill: none;
}

<div class="container">
  <svg class="lines" viewbox="0 0 400 100" preserveAspectRatio="xMidYMin">
    <path d="M 0 99 A 150 10 0 0 0 200 90 M 199.8 90 L 220 1 M 220 1 H 400 M 400 1 Z" />
  </svg>
</div>

CSS only

This was my first attempt. It is okay-ish but you have to adjust it when you scale it.

html {
  margin: 3em;
}

.lines {
  --skew: -20deg;
  --slope-offset: 35%;
  position: relative;
  height: 100px;
  width: 100%;
  overflow: hidden;
}

.lines::before, .lines::after {
  content: '';
  position: absolute;
}

.lines::before {
  left: 0;
  width: var(--slope-offset);
  bottom: 0px;
  height: calc(20% - 2px);
  border-right: 2px solid grey;
  border-bottom: 2px solid grey;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 100px;
  transform: translateX(-18px) skew(var(--skew));
}

.lines::after {
  left: var(--slope-offset);
  right: 0%;
  height: calc(80% - 2px);
  border-top: 2px solid grey;
  border-left: 2px solid grey;
  transform: skew(var(--skew));
}

<div class="lines"></div>

How makes a diagonal border in css in three parts

1 Answers1

With an SVG

CSS only