如何制作对角边框（顶部和左侧）

问题描述 投票：0回答：2

image description here

我需要制作一个这样的div。 我在clip-path中制作了它，但问题是我必须将内容插入到div屏障出来的div（一些文本）中，如果有人有解决方案如何获得对角线边框（顶部，左侧），我将不胜感激

html css border clip-path diagonal
2个回答
0
投票

你可以使用

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>

-2
投票

对角线边框的想法，

<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>
您可以使用此示例来实现对角线边框

而且，我可以与您分享一些我开始前端开发之旅时使用的链接，您可以使用它，这会节省您的一些时间

  1. https://fonts.google.com/icons
  2. https://fonts.google.com/字体
  3. https://htmlcheatsheet.com/css/
  4. https://htmlcheatsheet.com/
  5. https://mixkit.co/ 免费堆栈视频 ncc
  6. https://www.freeformatter.com/html-formatter.html 代码格式化程序 - 良好代码制作的最佳工具

-JD

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.