代码之家 › 专栏 › 技术社区 › conye9980

向矩形div添加形状

css html

-1

conye9980 · 技术社区 · 6 年前

到目前为止我得到的jsfiddle是 http://jsfiddle.net/Conye9980/zujLrs3d/3/

.triangle-down {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #555;
    align:right;
}
.square {
    height: 50px;
    width: 50px;
    background-color: #555;
    align:right;
}
.rect {
    margin: 20px;
    width:200px;
    height: 80px;
    background-color: yellow;
}

我希望它看起来像这样的例子如下:

3 回复 | 直到 5 年前

Dharmesh Vekariya 6 年前

但是,按照你开始的方式,看看这个小提琴,我以你的为基础,添加了更多的代码,看起来像是你想要实现的:

http://jsfiddle.net/rdarioduarte/b0sthgL6/

.rect {
  margin: 20px;
  width:200px;
  height: 80px;
  background-color: #5261AC;
  position: relative;
}
.bookmark {
  position: absolute;
  top: -10px;
  right: 10px;
}
.square {
  height: 50px;
  width: 30px;
  background-color: #50C9B5;
}
.triangle-down {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #50C9B5;
}
.bookmark-back {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-bottom: 10px solid #38A1A4;
  position: absolute;
  top: 0;
  left: -6px;
}

<div class="rect">
  <div class="bookmark">
    <div class="square"></div>
	<div class="triangle-down"></div>
	<div class="bookmark-back"></div>
  </div>
</div>

Programmer 6 年前

对你来说够了吗?我把“丝带”的两部分合在一起 div position: absolute 和 top & right 定位。

   .triangle-down {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #555;
    align:right;
}
.square {
    height: 50px;
    width: 50px;
    background-color: #555;
    align:right;
}

.rect {
    margin: 20px;
    width:200px;
    height: 80px;
    background-color: yellow;
    position:relative;
}

#ribbon {
    position: absolute;
    top: -8px;
    right: 8px;
}

<div class="rect">
  <div id="ribbon">
    <div class="square"></div>
    <div class="triangle-down"></div>
  </div>
</div>

Kamran Poladov 6 年前

    .triangle-down {
    position: absolute;
    top: 60px;
    width: 0px;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #555;
    align:right;
    }

    .square {
    top: 10px;
    height: 50px;
    width: 50px;
    background-color: #555;
    position: absolute;
    align:right;
    }

    .rect {
    margin: 20px;
    width:200px;
    height: 80px;
    background-color: yellow;