Я пытаюсь настроить треугольник, который будет охватывать 50% родительского контейнера из угла в угол, независимо от того, что коэффициенты прямоугольника могут быть скошены треугольником.SVG-масштабирование с родительским контейнером
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin meet" viewBox="0,0,100,100">
<polygon points="100,100 100,0 0,100"/>
</svg>
</div>
.container {
height:160px;
background-color:#ccc;
margin-top:10px;
}
I've setup a fiddle with the code, я пытаюсь повторить то же поведение, что я был в состоянии достичь с помощью CSS, поэтому я хочу, чтобы идти по пути SVG, чтобы остановить линию от получения пикселизации this is the previous code of css.
Как добиться того же результата в CSS
<div class="parent">
<div class="arrow-right"></div>
</div>
.parent {
position:relative;
width:230px;
height:150px;
background-color:red;
}
.arrow-right {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
bottom: 0px;
background: linear-gradient(to left top, #333 50%, transparent 50%);
opacity: 0.5;
}
Как изменить viewBox
, чтобы позволить форму многоугольника, чтобы не остаться в пропорции?
Так просто ... Я первоначально пытался 'preserveAspectRatio =«нет»', но он не был совместно работает, я должен из добавлены некоторые другие поля, которые необходимы. Благодаря! – Bankzilla