css - 切割边缘到左下角

Question

我已经找到了那个代码，但是把切割边放到左下角都是徒劳的，请帮忙。我们怎样才能把那个 Angular 放在左下角。我一直在努力，但都是徒劳的

Fiddle

<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;
}