箭头右类型侧边栏[关闭]答案

【问题标题】：Arrow Right Type Sidebar [closed]箭头右类型侧边栏[关闭]
【发布时间】：2017-01-18 10:25:40
【问题描述】：

我已经解决这个问题好几个小时了，但仍然不知道如何实现这个右箭头类型的侧边栏。我想要这样的侧边栏外观。 Sidebar UI I want to achieve

如何实现右侧边栏的那个箭头？是否有类似的代码可以用作基础？

【问题讨论】：

请先搜索再询问。 stackoverflow.com/questions/7073484/how-do-css-triangles-work
您的问题是什么？你有什么问题？
How do CSS triangles work?的可能重复

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

	.right-arrow {
	display: inline-block;
	position: relative;
	background: orange;
	padding: 20px;
}
.right-arrow:after {
	content: '';
	display: block;  
	position: absolute;
	left: 100%;
	top: 0;
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid orange;
}

&lt;div class="right-arrow"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

这可以在伪类":before or :after"的帮助下完成

li { width:200px; background:green; list-style-type:none; margin-bottom:20px; padding:5px; color:#fff; position:relative;}
li:before {
  content:"";
  position:absolute; 
  right:-14px; top:0px;
  width: 0; 
  height: 0; 
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 14px solid green;
}

<ul>
 <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  </ul>

【讨论】：