Question 45475 in Html Question posted in
Some basic documentation can be found here.

how to make a diagonal border (top and left) – Html

image description here

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

Tags:

2

Answers


  1. 0

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

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

    -JD

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search