0
A
回答
0
添加overflow:hidden
您steps
类。
@function pow($number, $exp) {
$value: 1;
@if $exp > 0 {
@for $i from 1 through $exp {
$value: $value * $number;
}
}
@else if $exp < 0 {
@for $i from 1 through -$exp {
$value: $value/$number;
}
}
@return $value;
}
@function fact($number) {
$value: 1;
@if $number > 0 {
@for $i from 1 through $number {
$value: $value * $i;
}
}
@return $value;
}
@function pi() {
@return 3.14159265359;
}
@function rad($angle) {
$unit: unit($angle);
$unitless: $angle/($angle * 0 + 1);
// If the angle has 'deg' as unit, convert to radians.
@if $unit == deg {
$unitless: $unitless/180 * pi();
}
@return $unitless;
}
@function cos($angle) {
$cos: 0;
$angle: rad($angle);
// Iterate a bunch of times.
@for $i from 0 through 10 {
$cos: $cos + pow(-1, $i) * pow($angle, 2 * $i)/fact(2 * $i);
}
@return $cos;
}
.steps {
display: inline-flex;
width: 500px;
height: 50px;
border: 1px solid #D9D9D9;
border-radius: 2px;
overflow-x:hidden;
}
.step {
position: relative;
display: flex;
align-items: center;
white-space: nowrap;
padding: 0 15px;
box-sizing: border-box;
background-color: #FAFAFA;
&:hover {
background-color: #EDEDED;
cursor: pointer;
}
&::after {
position: absolute;
top: -2px;
right: -23px;
content: '';
width: 27px;
height: 27px;
background-color: inherit;
transform: rotate(67.5deg) skewX(45deg) scaleY(cos(45deg));
transform-origin: left;
border-top: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
z-index: 1;
}
}
<div class="steps">
<div class="step">Very very very long text</div>
<div class="step">Very very very long text</div>
<div class="step">Very very very long text</div>
<div class="step">Very very very long text</div>
<div class="step">Very very very long text</div>
</div>
相关问题
- 1. 工作灯短信通知的步骤
- 2. 按钮旋转后截短的文本
- 3. 自定义构建步骤中的自动版本文件步骤
- 4. Dijkstra最短路径与最小步骤
- 5. 通过注册步骤,我可以使用什么工具作为步骤栏?
- 6. 基本步骤17.04
- 7. 获取今天的所有步骤,但从Health kit中使用swift截取手动添加的步骤
- 8. BFS算法 - 在约束步骤的网格上最短步行
- 9. 更改向导步骤按钮文本
- 10. 导航栏问题 - 步骤形成
- 11. XSTREAM中的步骤
- 12. iOS中的SSL - 基本步骤
- 13. 使用打印在常规脚本步骤的请求步骤响应变量
- 14. 步骤使用RazorGenerator.MsBuild
- 15. 步骤使用biojava
- 16. 春季创建webservice的步骤步骤
- 17. 黄瓜步骤上错误的步骤
- 18. ISampleGrabberFilter一次一个步骤的步骤
- 19. Bash脚本,清理步骤。
- 20. 使用bash脚本时,“cat”文件是无用的步骤吗?
- 21. UITextView:在截短文本中查找省略号的位置
- 22. 嵌套柔性盒项目中的截短文本
- 23. 1步骤中的特定本地文件的rsync列表
- 24. 上传Bonita步骤中的文件
- 25. 使用jquery步骤的Summernote
- 26. 如何使用从右到左的步骤jquery步骤向导
- 27. 步骤的一步如何使用AS3
- 28. shell脚本在步骤中执行
- 29. 在Ant脚本中创建Java步骤
- 30. 步骤