css 如何做一个对角线边框(上和左)

ac1kyiln 于 2023-02-14 发布在其他

关注(0)|答案(2)|浏览(343)

image description here
我需要做一个像这样的div。我在clip-path中做的，但是问题是我必须把内容插入到div（一些文本）中，这是从div barrier中出来的，如果有人能解决如何得到一个对角边框（顶部，左侧），我将不胜感激

css

来源：https://stackoverflow.com/questions/75435106/how-to-make-a-diagonal-border-top-and-left

2条答案

按热度按时间

c9qzyr3d1#

您可以使用skew：

.diagonal-border {
  width: 200px;
  height: 200px;
  transform: skew(-20deg);
  background-color: lightgray;
  overflow: hidden;
}

.diagonal-border p {
  transform: skew(20deg);
  padding: 10px;
}

<div class="diagonal-border">
  <p>Content goes here</p>
</div>

赞(0）回复(0）举报 2023-02-14

shyt4zoc2#

对角线边框的想法

<html>
<head>
   <style>
    div{
       border-bottom: 1px solid red;
       width: 50%;
       transform: rotate(45deg);
       transform-origin: top left;
    }
   </style>
</head>
<body>
    <h2>A simple diagonal Line:</h2>
    <div></div>
</body>
</html>

您可以使用此示例实现对角线边框
而且，我可以与您分享我开始前端开发之旅时使用的一些链接，您可以使用这些链接，这将保存您的一些时间

https://fonts.google.com/icons
https://fonts.google.com/字体
https://htmlcheatsheet.com/css/
https://htmlcheatsheet.com/
https://mixkit.co/自由堆栈视频ncc
https://www.freeformatter.com/html-formatter.html代码格式化程序-制作好代码的最佳工具
-JD

赞(0）回复(0）举报 2023-02-14

我来回答

css 如何做一个对角线边框(上和左)

2条答案

相关问题

热门标签

最新问答