边界半径与css三角形 [英] border radius with css triangles

问题描述

我有：

..但是一旦我添加一个左下边界半径，我得到

I have a rectangle where each side of the diagonal has it's own color

div {
    width: 0;
    height: 0;    
    border-left: 150px solid green;
    border-top: 100px solid gray;
}

Now I wanted to add a border-radius to the div, but then I noticed that this works fine for all sides except for bottom left.

So if I add:

border-radius: 10px 10px 10px 0;

I get this:

.. but as soon as I add a bottom left border-radius, I get this:

1) Why does this happen?

2) Is there an easy fix?

Edit:

I'm using Chrome, but I just looked a firefox and IE and the results are different!

Firefox:

IE 11

What's going on?

解决方案

Try to add a wrapping container:

<div class="wrap">
    <div class="triangle"></div>
</div>

with this style:

.wrap {
    display: inline-block;
    overflow: hidden;
    border-radius: 10px;
}

overflow: hidden; should do the trick.

Demo: http://jsfiddle.net/dfsq/9xDVj/8/

这篇关于边界半径与css三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！