矩形，一侧倾斜

Question

I'm looking for a CSS approach to make one div's side oblique, but with border radius at the top. for example

solution with transform skew doesnt work, because I need correct border-radius. thanks in advance!

Answer 1

How about this? I made the two parts of the tab different colors, so you can see their outline.

 .tab { display: inline-block; border: 1px solid black; } .tab .left { background-color: pink; border: solid red; border-width: 3px 0 0 3px; border-radius: 10px 0 0 0; height: 20px; padding: 0 10px; float: left; } .tab .right { background-color: #8080FF; border: solid blue; border-width: 3px 3px 0 0; width: 20px; height: 20px; border-radius: 0 10px 0 0; float: left; transform: skew(30deg); transform-origin: 0 100%; } 

 <div class="tab"> <div class="left">TextTexT</div> <div class="right"></div> </div> 

Answer 2

demo - http://jsfiddle.net/bu4aps5a/

use pseudo element :after

 div { width: 100px; height: 40px; border: 1px solid grey; border-right: 1px solid transparent; border-top-left-radius: 5px; border-top-right-radius: 6px; position: relative; background: rgb(219, 219, 219); text-align: center; line-height: 40px; } div:after { content: ''; width: 20px; height: 100%; position: absolute; transform: skewX(25deg); border: 1px solid grey; border-left: 1px solid transparent; top: -1px; right: -11px; border-top-right-radius: 6px; background: rgb(219, 219, 219); } 

 <div>test</div> 

Answer 3

Here is a svg solution without any CSS:

 <svg width="95" height="46"> <path d="M1,9 Q1,1 9,1 L70,1 Q76,0 80,9 L95,45 L1,45z" fill="#EEEEEE" stroke="#818185" stroke-width="1" /> <text x="25" y="29" font-size="18" font-weight="500" fill="#414145">Hits</text> </svg>