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. 基本步驟17.04
- 3. 獲取今天的所有步驟,但從Health kit中使用swift截取手動添加的步驟
- 4. BFS算法 - 在約束步驟的網格上最短步行
- 5. 更改向導步驟按鈕文本
- 6. 步驟使用RazorGenerator.MsBuild
- 7. 黃瓜步驟上錯誤的步驟
- 8. ISampleGrabberFilter一次一個步驟的步驟
- 9. 1步驟中的特定本地文件的rsync列表
- 10. 上傳Bonita步驟中的文件
- 11. 使用jquery步驟的Summernote
- 12. 如何使用從右到左的步驟jquery步驟嚮導
- 13. 在Ant腳本中創建Java步驟
- 14. shell腳本在步驟中執行
- 15. 步驟
- 16. 在匹配之前修改黃瓜中的步驟文本
- 17. 黃瓜欄|定義描述數據庫中更改的步驟
- 18. 黃瓜欄中的通用點擊步驟(含和不含硒)
- 19. 在Angular2中使用FormGroup的jquery步驟
- 20. 在Java中使用JavaBuilder的步驟
- 21. Rspec中的命令步驟和說明步驟
- 22. 在android中使用MQTT的基本步驟
- 23. Buildbot中的分組步驟
- 24. sqlite3_create_function_v2中的步驟錯誤
- 25. 如何使用SAS中的數據步驟排序數據步驟
- 26. 通過Twilio REST API檢索短信/彩信的傳送步驟
- 27. 爲`Given`和`Then`定義相同的短語步驟
- 28. Javascript:在幾個步驟中顯示文本
- 29. 縮短地址欄中縮短的URL
- 30. 如何截斷文本中的文本