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

How to create a triangle with one side border using only html and css

How to create a triangle with border only on one side of the triangle using only html and css. How would I be able to achieve that.

enter image description here

I am able to create a triangle using different methods like clip-path, linear gradient but the border is something which is very tricky

Tags:

2

Answers


  1. 0 
    line {
  stroke-linecap: round;
}

.stroked {
  stroke: magenta;
  stroke-width: 1;
}

:not(.stroked) {
  stroke: teal;
  stroke-width: 0.25;
}
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="20" y1="50" x2="50" y2="10"></line>
  <line x1="50" y1="10" x2="80" y2="50"></line>
  <line class="stroked" x1="80" y1="50" x2="20" y2="50"></line>
</svg>
    Login or Signup to reply.
  2. 0

    clip-path combined with gradient

    .box {
  height: 300px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  /* 10px = thickness */
  background: linear-gradient(to bottom right, red calc(50% + 10px), lightblue 0);
}


body {
  margin: 0;
}
    <div class="box"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search