how to make a diagonal border (top and left)

Question

I need to make a div like this. I made it in clip-path, but the problem is that I have to insert the content into div (some text) that came out of div barrier, if anyone has a solution how to get a diagonal border (top, left), I would be grateful

score 0 · Answer 1 · answered Feb 13 '23 at 11:26

you can use skew :

.diagonal-border {
  width: 200px;
  height: 200px;
  transform: skew(-20deg);
  background-color: lightgray;
  overflow: hidden;
}

.diagonal-border p {
  transform: skew(20deg);
  padding: 10px;
}

<div class="diagonal-border">
  <p>Content goes here</p>
</div>

score -2 · Answer 2 · edited Jul 30 '23 at 11:09

An idea for the diagonal border ,

<html>
<head>
   <style>
    div{
       border-bottom: 1px solid red;
       width: 50%;
       transform: rotate(45deg);
       transform-origin: top left;
    }
   </style>
</head>
<body>
    <h2>A simple diagonal Line:</h2>
    <div></div>
</body>
</html>

You can use this example to implement the diagonal borders

And, I can share with you some links that used to use when I started the journey in frontend development you can use and it will save some of your time

https://fonts.google.com/icons
https://fonts.google.com/ fonts
https://htmlcheatsheet.com/css/
https://htmlcheatsheet.com/
https://mixkit.co/ free stack vedio ncc
https://www.freeformatter.com/html-formatter.html code formatter - the best tools for a good code making

-JD

how to make a diagonal border (top and left)

2 Answers2