制作反转标题css

Posted 2023-03-16

【中文标题】制作反转标题css

【英文标题】：Make invert header css

【发布时间】：2022-01-15 12:09:09

【问题描述】：

我想在 Ionic 中制作反转标题，我目前有这样的制作 Now

但我想像这样制作一个倒置的边框半径： Result I want

有实际的css：

.holder 
  position: relative;
  width: 100%;
  display: flex;
  height: 35vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;


.holder:before 
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #DC9265;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #ECBC67, #F5C267);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #e9b081, #D58564);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  transform: scaleX(1.5);

谢谢

【参考方案1】：

您应该将边框半径更改为

border-radius: 85% 85% 0 0/450px 450px 0 0;

【讨论】：

这个改变了顶部的边框半径

好的，我有另一个解决方案，但它只能在移动设备上干净，也许其他人可以做得更好，但试试这个 background-image: radial-gradient(circle at 50% 100%, rgba(255, 0, 0, 0) 200px, rgb(0, 0, 0) 100px); 而不是边界半径