如何绘制在html中弯曲的一侧的矩形

-1

是否可以在html中绘制弯曲的矩形？形状应显示在html页面的底部，因为它需要页脚。如何绘制在html中弯曲的一侧的矩形

2016-11-25 Cooolranjan

，这是什么形状的预期使用？简单的选项通常只是使用具有透明度的图像，但这取决于您使用的图像。（例如，它是纯粹的图形，还是你需要把东西放在它？）我可能会使用图像的脚注形状。 – DBS

你可以在上一个元素上使用border-radius http://codepen.io/anon/pen/NbgVZm –

[下载Inkscape]（https://inkscape.org/en/download/）并且玩一玩。你的形状在svg中应该没有任何问题。 – enhzflep

试试这个：本应显示的第一个步骤仅:-)

.wrapper { 
    width: 500px; 
    height: 200px; 
    border: 1px solid black; 
    border-top: none; 
    position: relative; 
    overflow: hidden; 
    z-index: 1; 
} 

.wrapper:before { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    border-radius: 80%; 
    border: 1px solid black; 
    left: 0; 
    top: -50%; 
    z-index: 2; 
}

你可以玩的顶部（％）和半径，以满足您的需求票数是小提琴：https://jsfiddle.net/tbm2jgbk/

来源

2016-11-25 15:38:15

谢谢，是否有可能渲染左部分，即形状部分以外的部分是透明的？ .wrapper：之前背景颜色透明，没有得到填充.wrapper背景颜色 – Cooolranjan

当然，但我背景透明不会改变很多，而不是使用背景颜色：白色（或无论你的背景是什么）.wrapper：之前（hier：https：//jsfiddle.net/tbm2jgbk/1/） –

您可以使用SVG作为分隔符。

body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
main { 
 
    flex: 3; 
 
    background-color: purple; 
 
    fill: purple; /* Color svg separator will inherit from */ 
 
    position: relative; 
 
} 
 
svg { 
 
    width: 100%; 
 
    height: 50px; 
 
    position: absolute; 
 
    top: 100%; 
 
    fill: inherit; 
 
} 
 
footer { 
 
    flex: 1; 
 
    padding-top: 50px; /* svg separator height */ 
 
    background-color: gold; 
 
}

<main> 
 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none"> 
 
    <path d="M0 0 C 50 100 50 100 100 0 Z"></path> 
 
    </svg> 
 
</main> 
 
<footer></footer>

来源

2016-11-25 15:49:41 Ricky

如何绘制在html中弯曲的一侧的矩形

回答

相关问题