<div class="test1"> <div class="test2">Nội dung Demo</div> <svg width="100%" height="100%" viewBox="0 0 1302 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g><path d="M5.1,-0.6c0.2,0.2 3.6,2 7.4,4c15.8,8.1 29.6,21.7 38.3,37.6c9.2,16.7 24.2,28.3 39.9,30.9c5,0.9 153.4,1.1 563.3,0.9l556.5,-0.3l6.2,-2.2c14.6,-5.3 25.6,-14.5 33.9,-28.1c10.6,-17.6 23,-29.9 39.7,-39.2c3.1,-1.7 5.7,-3.4 5.7,-3.6c-0,-0.2 -290.5,-0.4 -645.7,-0.4c-355.1,-0 -645.4,0.2 -645.2,0.4Z" style="fill:#fff;"/></g></svg> </div> <style> .test2{ background:#3858e9; padding:30px; color:#fff; text-align: center; font-weight: bold; } .test1 svg{ height:auto; } .test1 svg path{ fill:#3858e9 !important; } </style>
<div class="test1"> <div class="test2">Nội dung Demo</div> <svg width="100%" height="100%" viewBox="0 0 1302 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g><path d="M5.1,-0.6c0.2,0.2 3.6,2 7.4,4c15.8,8.1 29.6,21.7 38.3,37.6c9.2,16.7 24.2,28.3 39.9,30.9c5,0.9 153.4,1.1 563.3,0.9l556.5,-0.3l6.2,-2.2c14.6,-5.3 25.6,-14.5 33.9,-28.1c10.6,-17.6 23,-29.9 39.7,-39.2c3.1,-1.7 5.7,-3.4 5.7,-3.6c-0,-0.2 -290.5,-0.4 -645.7,-0.4c-355.1,-0 -645.4,0.2 -645.2,0.4Z" style="fill:#fff;"/></g></svg> </div> <style> .test2{ background:#3858e9; padding:30px; color:#fff; text-align: center; font-weight: bold; } .test1 svg{ height:auto; } .test1 svg path{ fill:#3858e9 !important; } </style>
×
Mã nhúng & chia sẻ
Sử dụng code SVG tạo các đường công đặc biệt