How to make svg path pointed? - css

Question

.fancybox-layout6 .cshero-fancybox-effect svg path {
stroke: #da1527;
fill: #FFF;
stroke-width: 8px;
}
<svg style="fill: #222;" height="60px" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L50 100 L100 0" stroke-width="0"></path>
</svg>
I have an SVG triangle and I have rotated it to 90deg, I added the stroke, stroke-width but my problem is when I add stroke-line-join, it won't work

Answer 1

I guess what you missed is stroke property. So i added stroke="black". The stroke-linejoin="round" you can add it either in SVG itself or CSS. As of now, I added it in CSS
.fancybox-layout6 .cshero-fancybox-effect svg path {
stroke: #da1527;
fill: #FFF;
stroke-width: 8px;
stroke-linejoin: round;
}
<svg style="fill: #222;" height="60px" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L50 100 L100 0" stroke="black"
></path>
</svg>

Answer 2

Your problem is that your path goes right to the edges of your SVG.
When you add a stroke width and line joins, they are overflowing the edges of your SVG, and getting cut off.
If we unstretch your SVG, add a blue border to show the boundaries of the SVG, and turn on overflow, it should be clear what is happening.
svg path {
stroke: #da1527;
fill: #FFF;
stroke-width: 8px;
}
svg {
width: 200px;
height: 200px;
border: dashed 1px blue;
overflow: visible;
}
<svg viewBox="0 0 100 100">
<path d="M0 0 L50 100 L100 0" stroke-width="0"></path>
</svg>
To fix that, you will either have to:
make your triangle path smaller, so that the stroke joins and caps fit inside your viewBox bounds, or
make your viewBox bigger, to tak account of the caps and joins.
In the example below I have chosen the "adjust the viewBox" approach.
svg path {
stroke: #da1527;
fill: #FFF;
stroke-width: 8px;
}
svg {
background: linen;
}
<svg style="fill: #222;" height="60px" preserveAspectRatio="none" version="1.1" viewBox="-4 -5 108 116" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L50 100 L100 0" stroke-width="0"></path>
</svg>