星期三, 8月 04, 2021

[CSS] 純CSS- 背景漸變效果linear-gradient實做表格中的對角線(diagonal)效果

最後用最簡單的方法,在td內放入一個元素
並使用linear-gradient語法
<div class="diagonal"></div>


/*模擬對角線*/
div.diagonal{
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
content: '';
width: 100%;
background: linear-gradient(to top right,rgb(235, 218, 203) calc(50% - 1px), #fff , rgb(235, 218, 203) calc(50% + 1px) )
}

How to Draw Diagonal Line with CSS
Naveno Cendikiawan

 https://codepen.io/navenoc13/pen/YzpXrOg

沒有留言:

張貼留言

留個話吧:)

其他你感興趣的文章

Related Posts with Thumbnails