我有一张照片,看起来像这样:
我想用HTML和CSS进行标记。
我希望弯曲部分始终位于屏幕中心并有内容。而且我希望平坦的部分根据用户屏幕的左右宽度伸展。
我该怎么做?谁能给我例子?
感谢您的关注。
您可以尝试此演示
html
#test{
width: 50px;
height: 600px;
background: green;
position: absolute;
top:0;
left:0;
right:0;
margin: auto;
display: inline-block;
-webkit-transform: translate(300px) rotate(90deg) ;
-webkit-transform-origin: left top;
}
#test:after{
background: white;
height: 600px;
width: 100px;
border-radius: 100px 0 0 100px / 600px 0 0 600px;
display: inline-block;
content: '';
position: relative;
left: 25px;
}
所以这是所需的最终演示
html
<div id="testbefore"></div>
<div id="test"></div>
的CSS
body, html {
margin:0;
padding:0;
width:100%;
}
#testbefore {
width: 100%;
height: 50px;
background: green;
}
#test {
width: 50px;
height: 600px;
background: green;
position: absolute;
top:0;
left:0;
right:0;
margin: auto;
display: inline-block;
-webkit-transform: translate(300px) rotate(90deg);
-webkit-transform-origin:top;
}
#test:after {
background: white;
height: 600px;
width: 100px;
border-radius: 100px 0 0 100px / 600px 0 0 600px;
display: inline-block;
content:'';
position: relative;
left: 50px;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句