HTML中的曲线颜色

Question

我想添加一个带有差异颜色的弯曲反馈，如附图所示。我尝试了多种选项，但我无法做到。

这是（简化的）HTML源：

<form id="TopPanelForm">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td valign="top" class="mnLinks">

                <div class="right userInfo">
                    Logged in user:&nbsp; <strong>[username]</strong>|
                    <a href="#">About</a>|
                    <a href="#">Sign Out</a>|
                    <a href="#" style="text-decoration:none;text-align: left;background-color:red;">Feedback</a>                        
                </div>
            </td>
        </tr>
    </table>
</form>

但我无法做到。任何建议都会有很大的帮助。

Answer 1

使用border-radius进行弯曲反馈。

<form id="TopPanelForm">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td valign="top" class="mnLinks">

                <div class="right userInfo">
                    Logged in user:&nbsp; <strong>[username]</strong>|
                    <a href="#">About</a>|
                    <a href="#">Sign Out</a>|
                    <a href="#" style="text-decoration:none;text-align: left; background: red; border-bottom-left-radius: 100px; padding-left: 20px; padding-top: 5px; padding-bottom: 5px; font-family: Calibri, Corbel, Arial; color: #FFF; box-shadow: 0px 0px 5px 1px #000;">Feedback</a>                        
                </div>

            </td>
        </tr>

    </table>
</form>

现在，您可以使用此工具添加css渐变：http://www.colorzilla.com/gradient-editor/

修改

最好使用position: relative;表格，position: absolute;表示“反馈”

<form id="TopPanelForm">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="position: relative;">
        <tr>
            <td valign="top" class="mnLinks">

                <div class="right userInfo">
                    Logged in user:&nbsp; <strong>[username]</strong>|
                    <a href="#">About</a>|
                    <a href="#">Sign Out</a>|
                    <a href="#" style="text-decoration:none;text-align: left; background: red; border-bottom-left-radius: 100px; padding-left: 20px; padding-top: 5px; padding-bottom: 5px; font-family: Calibri, Corbel, Arial; color: #FFF; box-shadow: 0px 0px 5px 1px #000; position: absolute; right: 0px; top: 0px;">Feedback</a>                        
                </div>

            </td>
        </tr>

    </table>
</form>

Answer 2

你可以使用border radius来做这类事情。

border-radius: 0 0 0 100%; /*change 100% to desired percentage*/

---

.feedback {
  height: 30px;
  width: 100px;
  background: tomato;
  border-radius: 0 0 0 90%;
  padding: 2px;
  text-align: right;
}

<div class="feedback">Feedback?</div>

---

但是，作为旁注，我想指出一些事情：

• 请不要使用表格进行布局（这会导致进一步的问题）
• 请避免使用内联样式（出于某种原因我们有css样式表）