Custom CSS Grid Border Using Image

huangapple
go评论100阅读模式
英文:

Custom CSS Grid Border Using Image

问题

我正在为客户开发一个项目，使用 nextjs，并且设计要求我创建一个具有自定义边框的响应式 CSS 网格组件。我已经创建了包含所有内容的 CSS 网格，但是在添加设计所需的边框方面遇到了很多问题。

到目前为止，我已经尝试将边框作为背景的一部分，但在不同设备之间切换时出现了问题。我还尝试使用 ::after 伪元素，但没有取得进展。

我需要在 CSS 网格上实现以下效果的边框：

Custom CSS Grid Border Using Image

我应该如何实现这个效果？

英文:

I'm working on a project for a client using nextjs, and the design requires me to have a component with a custom border on a responsive CSS grid. I've made the CSS grid with all the content inside, however I'm having a lot of trouble adding the border that the design calls for.

So far I've tried making the border part of the background, but that gets screwy when I move between devices, I've also tried using an aftter pseudo element but I didn't get anywhere with that.

I need the border on the CSS grid to look like the image below:

Custom CSS Grid Border Using Image

How can I achieve this?

答案1

得分: 1

你可以更快地实现它，使用 border-image 属性。取一个 正方形图像形状，并放在 div 的边框上。上面链接的示例与此相关。看一下它。

或者

你可以尝试这个，不需要图片：-

  1. .container{
  2.    display: flex;
  3. }
  5. .container > .box{
  6.    padding: 2rem 1rem;
  7.    border: 1px solid black;
  8.    position: relative;
  9. }
  11. .container > .box:nth-child(odd):before,
  12. .container > .box:after
  13. {
  14.    content: '';
  15.    display: block;
  16.    width: 10px;
  17.    height: 10px;
  18.    border: 1px solid black;
  19.    background-color: pink;
  20.    position: absolute;
  21.    z-index: 1;
  22. }
  24. .container > .box:before{
  25.    top: -5px;
  26.    left: -5px;
  27. }
  29. .container > .box:after{
  30.    top: -5px;
  31.    right: -5px;
  32. }
  34. .container > .box:nth-child(odd) > span:before,
  35. .container > .box > span:after
  36. {
  37. content: '';
  38.    display: block;
  39.    width: 10px;
  40.    height: 10px;
  41.    border: 1px solid black;
  42.    background-color: pink;
  43.    position: absolute;
  44.    z-index: 1;
  45. }
  47. .container > .box > span:before{
  48.    bottom: -5px;
  49.    left: -5px;
  50. }
  52. .container > .box > span:after{
  53.    bottom: -5px;
  54.    right: -5px;
  55. }
  1. <div class="container">
  2.   <div class="box">
  3.      <span>Lorem Ipsum</span>
  4.   </div>
  5.   <div class="box">
  6.      <span>Ipsum Lorem</span>
  7.   </div>
  8. </div>
英文:

You can achieve it more quickly using border-image property. Take a square image shape and put in the border of the div. The attached linked above has a relatable example of it. Have a look at it.

OR

You can try this which doesn't require image:-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .container{
  2. display: flex;
  3. }
  4. .container &gt; .box{
  5. padding: 2rem 1rem;
  6. border: 1px solid black;
  7. position: relative;
  8. }
  9. .container &gt; .box:nth-child(odd):before,
  10. .container &gt; .box:after
  11. {
  12. content: &#39;&#39;;
  13. display: block;
  14. width: 10px;
  15. height: 10px;
  16. border: 1px solid black;
  17. background-color: pink;
  18. position: absolute;
  19. z-index: 1;
  20. }
  21. .container &gt; .box:before{
  22. top: -5px;
  23. left: -5px;
  24. }
  25. .container &gt; .box:after{
  26. top: -5px;
  27. right: -5px;
  28. }
  29. .container &gt; .box:nth-child(odd) &gt; span:before,
  30. .container &gt; .box &gt; span:after
  31. {
  32. content: &#39;&#39;;
  33. display: block;
  34. width: 10px;
  35. height: 10px;
  36. border: 1px solid black;
  37. background-color: pink;
  38. position: absolute;
  39. z-index: 1;
  40. }
  41. .container &gt; .box &gt; span:before{
  42. bottom: -5px;
  43. left: -5px;
  44. }
  45. .container &gt; .box &gt; span:after{
  46. bottom: -5px;
  47. right: -5px;
  48. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;container&quot;&gt;
  2. &lt;div class=&quot;box&quot;&gt;
  3. &lt;span&gt;Lorem Ipsum&lt;/span&gt;
  4. &lt;/div&gt;
  5. &lt;div class=&quot;box&quot;&gt;
  6. &lt;span&gt;Ipsum Lorem&lt;/span&gt;
  7. &lt;/div&gt;
  8. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 1

如果不需要透明度，您可以尝试使用与 border-image 结合的渐变。

  1. .box {
  2.   display: grid;
  3.   grid-template-columns: repeat(3,1fr);
  4.   height: 300px;
  5.   margin: 30px;
  6.   /* 使用锥形渐变模拟边框 */
  7.   background: 
  8.    conic-gradient(from 90deg at 1px 1px,#0000 25%,#7a97fb 0)
  9.    0 0/calc((100% - 1px)/3) calc((100% - 1px)/2)
  10. }
  11. .box div {
  12.   position: relative;
  13. }
  14. .box div:before,
  15. .box div:after {
  16.   content: "";
  17.   position: absolute;
  18.   inset: 0;
  19.   pointer-events: none;
  20.   /* 在角落创建具有 14px 大小的 4 个正方形 */
  21.   border-image: 
  22.    linear-gradient(#7a97fb 0 0) 50%/
  23.     14px/7px; /* 宽度 / (宽度/2) */
  24. }
  25. .box div:after {
  26.   /* 在上面的正方形之上创建 4 个具有 12px 大小的正方形，每边留出 1px 的边框 */
  27.   border-image: 
  28.    /* 这里的颜色必须与背景颜色匹配 */
  29.    linear-gradient(#ebf0f3 0 0) 50%/
  30.     12px/6px; 
  31. }
  33. body {
  34.  background: #ebf0f3;
  35. }
  1. <div class="box">
  2.   <div></div>
  3.   <div></div>
  4.   <div></div>
  5.   <div></div>
  6.   <div></div>
  7.   <div></div>
  8. </div>
英文:

If transparency is not needed you can try to use gradients combined with border-image

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .box {
  2. display: grid;
  3. grid-template-columns: repeat(3,1fr);
  4. height: 300px;
  5. margin: 30px;
  6. /* simulate the border using a grid made with conic-gradient*/
  7. background: 
  8. conic-gradient(from 90deg at 1px 1px,#0000 25%,#7a97fb 0)
  9. 0 0/calc((100% - 1px)/3) calc((100% - 1px)/2)
  10. }
  11. .box div {
  12. position: relative;
  13. }
  14. .box div:before,
  15. .box div:after {
  16. content:&quot;&quot;;
  17. position: absolute;
  18. inset: 0;
  19. pointer-events: none;
  20. /* create 4 squares on the corners with 14px size */
  21. border-image: 
  22. linear-gradient(#7a97fb 0 0) 50%/
  23. 14px/7px; /* width / (width/2) */
  24. }
  25. .box div:after {
  26. /* create 4 squares on the corners above the previous ones with 12px size
  27. leaving 1px on each side for the border you need 
  28. */
  29. border-image: 
  30. /* the color here must match the background color */
  31. linear-gradient(#ebf0f3 0 0) 50%/
  32. 12px/6px; 
  33. }
  34. body {
  35. background: #ebf0f3;
  36. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;box&quot;&gt;
  2. &lt;div&gt;&lt;/div&gt;
  3. &lt;div&gt;&lt;/div&gt;
  4. &lt;div&gt;&lt;/div&gt;
  5. &lt;div&gt;&lt;/div&gt;
  6. &lt;div&gt;&lt;/div&gt;
  7. &lt;div&gt;&lt;/div&gt;
  8. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月14日 16:28:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/76246540.html
  • css
  • css-grid
  • html
  • next.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定