Question

我一直在敲打这个问题几个小时，但仍然无法弄清楚如何实现这个箭头右侧边栏。我希望我的侧边栏看起来像这样。 Sidebar UI I want to achieve

如何实现右侧边栏的箭头？我可以使用类似的代码作为依据吗？

Answer 1

＆＃13;

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

＆＃13;

<div class="right-arrow"></div>

＆＃13;

Answer 2

这可以在伪类":before or :after"

的帮助下完成

＆＃13;

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

＆＃13;

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

＆＃13;

箭头右侧边栏

2 个答案: