CSS - 边角（非 border-radius）

[threetown]

1. 参考

• CSS秘密花园：斜切角
• [译] [304] [#12] 切角效果 cssmagic/CSS-Secrets#11

2. 效果图

• HTML
  

  gxd/index.html

  Lines 23 to 24 in 1061d1c

  	<div class="right_content commonBd hasBorderStyle">
  	<span></span><span></span><span></span><span></span>

• CSS
  

  gxd/static/css/cim/main_ol.css

  Lines 109 to 145 in 1061d1c

  	.hasBorderStyle{position: relative;}
  	.hasBorderStyle>span{
  	position: absolute;
  	padding: .05rem;
  	z-index: 2;
  	border-style: solid;
  	border-color: #104062;
  	}
  	.hasBorderStyle>span:nth-child(1),
  	.hasBorderStyle>span:nth-child(2){
  	top: -1px;
  	}
  	.hasBorderStyle>span:nth-child(1),
  	.hasBorderStyle>span:nth-child(4){
  	left: -1px;
  	}
  	.hasBorderStyle>span:nth-child(2),
  	.hasBorderStyle>span:nth-child(3){
  	right: -1px;
  	}
  	.hasBorderStyle>span:nth-child(3),
  	.hasBorderStyle>span:nth-child(4){
  	bottom: -1px;
  	}
  	.hasBorderStyle>span:nth-child(1){
  	border-width: 2px 0 0 2px;
  	}
  	.hasBorderStyle>span:nth-child(2){
  	border-width: 2px 2px 0 0;
  	}
  	.hasBorderStyle>span:nth-child(3){
  	border-width: 0 2px 2px 0;
  	}
  	.hasBorderStyle>span:nth-child(4){
  	border-width: 0 0 2px 2px;
  	}