css3 - 怎樣用純css畫(huà)出一個(gè)兩邊透明的S形寬區(qū)域
問(wèn)題描述
如圖,只想到了可以用兩邊填顏色遮住部分區(qū)域大概可以實(shí)現(xiàn),如果要兩側(cè)顯示如下層其他內(nèi)容就想不到怎樣實(shí)現(xiàn)了,求教

是不是一定要用canvas呢?
問(wèn)題解答
回答1:還是用canvas吧,css畫(huà)出來(lái)太慘不忍睹了
<canvas height='350px'></canvas>
<script> var g=canvas.getContext('2d'); g.beginPath(); g.strokeStyle='#000'; g.moveTo(0,200); g.bezierCurveTo(300,-100, 400,400, 550,0); g.lineTo(600,0); g.lineTo(600,100); g.bezierCurveTo(300,500, 300,-100, 0,350); g.lineTo(0,200); g.fillStyle='#000';g.fill();g.stroke(); </script>回答2:
可以的,給你一個(gè)教程吧 CSS的隱藏繪畫(huà)功能和交互動(dòng)畫(huà)技巧 演講者:Wenting Zhang
回答3:<p class='S'></p>
.S{width:160px;height:50px;position: relative;} .S:before{content: ’’; display: block;border:10px solid transparent;border-top-color:red;border-right-color:red; width:50px;height: 50px; border-radius:40px;background:transparent;transform:rotateZ(-45deg);position: absolute;} .S:after{content: ’’; display: block;border:10px solid transparent;border-bottom-color:red;border-right-color:red; width:50px;height: 50px; border-radius:40px;background:transparent;transform:rotateZ(45deg);position: absolute;top:-5px;left:60px}
相關(guān)文章:
1. docker-compose中volumes的問(wèn)題2. boot2docker無(wú)法啟動(dòng)3. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””4. nignx - docker內(nèi)nginx 80端口被占用5. java - SSH框架中寫(xiě)分頁(yè)時(shí)service層中不能注入分頁(yè)類6. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.7. javascript - mock.js可以存儲(chǔ)數(shù)據(jù)嗎8. golang - 用IDE看docker源碼時(shí)的小問(wèn)題9. dockerfile - 為什么docker容器啟動(dòng)不了?

網(wǎng)公網(wǎng)安備