Изогнутый цвет в HTML

Question

Я хочу добавить изогнутую обратную связь с цветом diff, как на прилагаемом рисунке. Я пробовал несколько вариантов, но я не могу это сделать.

Вот (упрощенный) 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

Используйте радиус радиуса, чтобы получить изогнутую обратную связь.

<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/

EDIT

Чтобы поместить его в верхней использованием 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: 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 стилей для причины)