css倾斜元素并获得内部圆形边框顶部

前端之家收集整理的这篇文章主要介绍了css倾斜元素并获得内部圆形边框顶部前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用css复制图形设计,但我没有响应,我可以实现静态形式但有微小缺陷(由于将两个元素组合在一起).

这是图形设计:

我更倾向于倾斜,例如:倾斜(-40deg).但这个想法是有一个内部的圆形边框,就像在图像中一样包裹着那个按键.

html很简单:

  1. <header>
  2. <nav></nav>
  3. </header>

css:

  1. body > header > nav {
  2. display: flex;
  3. align-items: flex-end;
  4. justify-content: center;
  5. width: 100vw;
  6. height: 90px;
  7. padding: 10px 0;
  8. text-align: center;
  9. z-index: 1
  10. }
  11. body > header > nav::before {
  12. content: '';
  13. position: absolute;
  14. top: 0; left: 0;
  15. width: 80vw; height: 100%;
  16. background-color: rgb(147,147,147);
  17. border-bottom-right-radius: 15px;
  18. transform: skew(-40deg);
  19. transform-origin: 100% 0%;
  20. }
  21. body > header > nav::after {
  22. content: '';
  23. position: absolute;
  24. top: 0; right: 0;
  25. width: 28.7%;
  26. border-top: 7px solid rgb(147,147);
  27. border-left: 50px solid rgb(147,147);
  28. height: 75px;
  29. border-top-left-radius: 75px;
  30. transform: skew(-33deg);
  31. }

我准备了https://jsfiddle.net/uj4qsf37/

有更清洁的方法吗?喜欢不必使用两个元素?使用一个元素可以很容易地使其响应.

解决方法@H_301_22@
我会这样做:
  1. .header {
  2. border-top: 20px solid blue;
  3. height:100px;
  4. position: relative;
  5. overflow: hidden;
  6. }
  7. .header:before,.header:after {
  8. content: "";
  9. vertical-align:top;
  10. display: inline-block;
  11. transform-origin: top right;
  12. transform: skew(-40deg);
  13. }
  14.  
  15. .header:before {
  16. height: 100%;
  17. width: 50%;
  18. border-radius: 0 0 20px 0;
  19. background: blue;
  20. }
  21.  
  22. .header:after {
  23. height: 20px;
  24. width: 20px;
  25. margin-left:-1px;
  26. background: radial-gradient(circle at bottom right,transparent 68%,blue 73%);
  27. }
  28.  
  29.  
  30. /*to illustrate different values of skew*/
  31. .header:before,.header:after {
  32. animation:change 2s linear infinite alternate;
  33. }
  34.  
  35. @keyframes change{
  36. from{transform: skew(0deg);}
  37. top{transform: skew(-40deg);}
  38. }
  1. <div class="header"></div>

猜你在找的CSS相关文章