【图形】CSS绘制弯曲的箭头
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <base target="_blank" /> <title>三十客 - 【图形】CSS绘制弯曲的箭头</title> <style> #curvedarrow { position: relative; width: 0; height: 0; border-top: 90px solid transparent; border-right: 90px solid red; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); margin: 80px 0 0 120px; } #curvedarrow:after { content: ""; position: absolute; border: 0 solid transparent; border-top: 30px solid red; border-radius: 120px 0 0 0; top: -120px; left: -100px; width: 120px; height: 120px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } </style> </head> <body> <div id="curvedarrow"></div> </body> </html>