如何创建一个倾斜的div

时间:2015-05-06 11:21:40

标签: html css css-shapes

div中会有一些文本,我应该可以将div的高度和宽度设置为auto,以便根据文本内部调整大小。 倾斜角度为45 *

enter image description here

1 个答案:

答案 0 :(得分:0)

试试这个

<强> CSS

.bar {
    height: 100px;
    width: 300px;
    background: #BC5859;
    display:inline-block;
    position: relative
}

.bar:before {
    display:inline-block;
    position: absolute;
    content:"";
    border-left: 100px solid #BC5859;
    border-bottom: 100px solid transparent;
    height: 0;
    width: 0px;
    right: -100px;
    top:0;
}

<强> DEMO HERE