Question

我在另一个div中有一个div，我试图调整div，所以左侧触摸左侧，右侧触及顶部。有没有与CSS有关？

这是我的代码：

.background { 
    background-color:black; 
    height:368px; 
}

.sold { 
    background-color:red; 
    font-size:26px; 
    width:200px; 
    text-align:center; 
    height:40px; 
    color:white; 
    line-height:40px;
}

<div class="background">

<div class="sold">Sold Out</div>

</div>

这是我的jfiddle：http://jsfiddle.net/vakcgvtu/

Answer 1

您可以使用transform：

＆＃13;

.background {
    background-color:black;
    height:368px;
    position: relative;
    overflow: hidden;
}
.sold {
    background-color:red;
    font-size:26px;
    width:200px;
    text-align:center;
    height:40px;
    color:white;
    line-height:40px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 37px;
    left: -43px;
    position: relative;
}

＆＃13;

<div class="background">
    <div class="sold">Sold Out</div>
</div>

＆＃13;

Answer 2

是的，实际上很简单。

演示 http://jsfiddle.net/vakcgvtu/4/

＆＃13;

.background {
    background-color:black;
    height:368px;
    position: relative;
    overflow: hidden;
}
.sold {
    background-color:red;
    font-size:26px;
    width:200px;
    text-align:center;
    height:40px;
    color:white;
    line-height:40px;
    position: absolute;
    left: -50px;
    top: 30px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

＆＃13;

<div class="background">
    <div class="sold">Sold Out</div>
</div>

＆＃13;

Answer 3

在这里，我改变了你transform rotate和position relative CSS。

的 JSFiddle

Answer 4

http://jsfiddle.net/vakcgvtu/2/

.sold {
    background-color:red;
    font-size:26px;
    width:200px;
    text-align:center;
    height:40px;
    color:white;
    line-height:40px;
    left: -50px;
    top: 30px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: relative;

CSS角度一个div

4 个答案:

的 JSFiddle