如何在一个正方形盒子中添加一条对角线?

新手上路，请多包涵

如何在一个正方形中添加一条对角线?

css css3

阅读 3.2k

2 个回答

得票最新

XboxYan

18.3k93891

发布于
2023-03-06 广东

可以直接用 CSS 线性渐变生成

.box{
    background: linear-gradient(to right bottom, transparent calc(50% - .5px), currentColor calc(50% + .5px), transparent 0);
}

https://codepen.io/xboxyan/pen/GRXEayb

陟上晴明

22k145391

发布于
2023-03-06 浙江

更新于
2023-03-06

横条绝对定位到正方形盒子的左上角，然后使用 transform:rotate(45deg) 就行。
哦，对了，记得切换 transform-origin 为 left。

<style>
  .box { width: 200px; height: 200px; border: 1px solid black; position: relative; overflow: hidden }
  .line{ width: 400px; height: 1px; background: red; position: absolute; transform: rotate(45deg); transform-origin: left;}
</style>
<body>
  <div class="box">
    <div class="line"></div>
  </div>
</body>

查看全部 2 个回答

推荐问题

相似问题

找不到问题？创建新问题

如何在一个正方形盒子中添加一条对角线?

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

element-plus的el-menu怎么修改el-sub-menu的template的B的颜色？

如何在CSS中实现滚动条不溢出圆角框？

css如何设置纵向滚动条的高度？