主页 / 问题 / 1535092
Accepted
Дарья
Asked:2023-08-10 00:31:47 +0000 UTC2023-08-10 00:31:47 +0000 UTC

绘制带角的矩形 html+css

  • 772

长方形你能告诉我如何使用CSS制作这样一个一侧有圆角的矩形吗？

html

2 个回答

  1. Best Answer

    这是可以做到的

    <!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <title>svg</title>
</head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800px" height="600px" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path style="opacity: 1" fill="#fefefe" d="M -0.5,-0.5 C 266.167,-0.5 532.833,-0.5 799.5,-0.5C 799.5,81.1667 799.5,162.833 799.5,244.5C 798.083,240.58 795.416,237.747 791.5,236C 554.833,235.333 318.167,235.333 81.5,236C 76.6986,236.984 72.5319,239.15 69,242.5C 48.6667,269.833 28.3333,297.167 8,324.5C 2.46605,331.58 2.13272,338.913 7,346.5C 27.7186,373.551 48.0519,400.885 68,428.5C 71.2933,431.787 75.1266,434.287 79.5,436C 317.167,436.667 554.833,436.667 792.5,436C 795.677,433.783 798.011,430.95 799.5,427.5C 799.5,484.833 799.5,542.167 799.5,599.5C 532.833,599.5 266.167,599.5 -0.5,599.5C -0.5,399.5 -0.5,199.5 -0.5,-0.5 Z"/></g>
<g><path style="opacity: 1" fill="url(#linear-gradient)" d="M 799.5,244.5 C 799.5,305.5 799.5,366.5 799.5,427.5C 798.011,430.95 795.677,433.783 792.5,436C 554.833,436.667 317.167,436.667 79.5,436C 75.1266,434.287 71.2933,431.787 68,428.5C 48.0519,400.885 27.7186,373.551 7,346.5C 2.13272,338.913 2.46605,331.58 8,324.5C 28.3333,297.167 48.6667,269.833 69,242.5C 72.5319,239.15 76.6986,236.984 81.5,236C 318.167,235.333 554.833,235.333 791.5,236C 795.416,237.747 798.083,240.58 799.5,244.5 Z"/></g>
<linearGradient id="linear-gradient">
    <stop offset="0%" stop-color="darkviolet"/>
    <stop offset="100%" stop-color="aqua"/>
</linearGradient>
</svg>
</body>

</html>

    展开至整页

    • 0

  2. 当然，我不是专家，但这就是我的发现。尝试

    border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

    这些命令。自己替换像素，然后选择你需要的命令，玩一玩

    • -2

相关问题