伪元素after实现三角形

伪元素after实现三角形

空心三角箭头

			.box{
				 position:relative;
	             width: 580px;
	              height: 300px;
	              padding: 20px 24px;
	              box-sizing: border-box;
	              background: #fff;
	              border: 1px solid #cccccc;
			}
            .box:after {
	              content: "";
	              position: absolute;
	              top: -6px;
	              right: 44px;
	              width: 10px;
	              height: 10px;
	              border-right: 1px solid #cccccc;
	              border-bottom: 1px solid #cccccc;
	              transform: rotate(-132deg);
	              background: #fff;
            }

实心三角形

			.box{
				 position:relative;
	             width: 580px;
	              height: 300px;
	              padding: 20px 24px;
	              box-sizing: border-box;
	              background: #fff;
	              border: 1px solid #cccccc;
			}
            .box:after {
	              content: "";
	              position: absolute;
	              top: -6px;
	              right: 44px;
	              width: 10px;
	              height: 10px;
	              border-right: 100px solid transparent;
			      border-left: 100px solid transparent;
			      border-bottom: 100px solid #f00;
	              background: #fff;
            }