与边缘顶部的边界

Question

我想制作一个div margin-top: -110px，但我想从border-right的顶部开始添加div，但没有margin-top: -110px属性。

我知道我可以使用两个或更多div，但它只需要完成1.可以用CSS完成，还是需要使用JavaScript？

Answer 1

您可以使用CSS伪元素实现此目的：

div {
    width: 100px;
    height: 200px;

    border-top: 100px solid red;

    position:relative;    
    background-color: gray;
}

div:after {
    display: block;
    position:absolute;

    content:" ";

    width: 0;
    height: 100%;

    border-right: 3px solid lime;
    top: 0;
    right:-3px;
}

http://jsfiddle.net/6W2KP/5/