Question

我已经找到了这个代码，但是将切割边缘放到左下方都是徒劳的，请帮忙。怎么能把那个角落放在左下角。我一直在努力，但一切都是徒劳的

<div class="doc"></div>

CSS

.doc{
   position:relative;
   height:46px;
   width:28px;
}

.doc, 
.doc:before{
  background-color: #c40d12;
}

.doc:after{
  position:absolute;
  top:0px; 
  right:-9px;
  content:"";
  display:block;
  width:0px; 
  height:0px;
  overflow:hidden;
  border-bottom: 9px solid #c40d12;
  border-right: 9px solid transparent;
  background:transparent;
}
.doc:before{
  position:absolute;
  top:9px;
  right:-9px;
  content:"";
  overflow:hidden;
  display:block;
  width:9px; 
  height:37px;
}

.doc:hover, 
.doc:hover:before{
  background-color: #970101;
}
.doc:hover:after{
  border-bottom: 9px solid #970101;
}

Answer 1

尝试使用以下CSS规则覆盖现有规则。

JSFiddle链接：http://jsfiddle.net/W5Hx9/

.doc{
   position:relative;
   height:46px;
   width:28px;
}

.doc, 
.doc:before{
  background-color: #c40d12;
}

.doc:after {
    position: absolute;
    bottom: 0px;
    left: -9px;
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    overflow: hidden;
    border-top: 9px solid #c40d12;
    border-left: 9px solid transparent;
    background: transparent;
}

.doc:before {
    position: absolute;
    bottom: 9px;
    left: -9px;
    content: "";
    overflow: hidden;
    display: block;
    width: 9px;
    height: 37px;
}

.doc:hover, 
.doc:hover:before{
  background-color: #970101;
}
.doc:hover:after{
  border-bottom: 9px solid #970101;
}

Answer 2

这是一个更简单的解决方案：http://jsfiddle.net/W5Hx9/1/。

.doc{
   position:relative;
   height:46px;
   width:37px;
   background-color: #c40d12;
   cursor: pointer;
}

.doc:after{
  position:absolute;
  left:0px; 
  bottom: 0px;
  content:"";
  border-bottom: 9px solid #fff;
  border-right: 9px solid transparent;
}

.doc:hover {
  background-color: #970101;
}

Answer 3

像这样修改了before和after css

工作守则：JSFIDDL E

切边到左下角

3 个答案: