当前位置：首页 > React

react实现ribbon

2026-01-26 15:41:55React

React 实现 Ribbon 效果

在 React 中实现 Ribbon 效果可以通过 CSS 样式和组件化方式完成。以下是几种常见 Ribbon 效果的实现方法：

基础 CSS Ribbon

通过纯 CSS 样式创建 Ribbon 效果：

function Ribbon({ text }) {
  return (
    <div className="ribbon">
      <span>{text}</span>
    </div>
  );
}

对应 CSS 样式：

react实现ribbon

.ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  overflow: hidden;
}

.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: #3498db;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font-size: 13px;
  text-align: center;
  right: -25px;
  top: 30px;
  transform: rotate(45deg);
}

带折角的 Ribbon

创建更复杂的折角效果：

function CornerRibbon({ text }) {
  return (
    <div className="corner-ribbon">
      <div className="ribbon-content">{text}</div>
    </div>
  );
}

对应 CSS：

react实现ribbon

.corner-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 70px 70px 0;
  border-color: transparent #e74c3c transparent transparent;
}

.ribbon-content {
  position: absolute;
  top: 15px;
  right: -60px;
  width: 100px;
  padding: 5px 0;
  background-color: #e74c3c;
  color: white;
  text-align: center;
  transform: rotate(45deg);
}

动态主题 Ribbon

通过 props 控制 Ribbon 样式：

function ThemedRibbon({ text, color = '#3498db', size = 'medium' }) {
  const sizeStyles = {
    small: { width: 100, height: 100, fontSize: 10 },
    medium: { width: 150, height: 150, fontSize: 13 },
    large: { width: 200, height: 200, fontSize: 16 }
  };

  return (
    <div className="ribbon" style={{ backgroundColor: color }}>
      <span style={{ 
        fontSize: `${sizeStyles[size].fontSize}px`,
        padding: `${sizeStyles[size].fontSize}px 0`
      }}>
        {text}
      </span>
    </div>
  );
}

动画 Ribbon

添加悬停动画效果：

.animated-ribbon span {
  transition: all 0.3s ease;
}

.animated-ribbon:hover span {
  background-color: #e74c3c;
  transform: rotate(45deg) scale(1.1);
}

响应式 Ribbon

适应不同屏幕尺寸：

@media (max-width: 768px) {
  .ribbon {
    width: 100px;
    height: 100px;
  }

  .ribbon span {
    width: 150px;
    font-size: 11px;
    right: -15px;
    top: 20px;
  }
}

这些方法可以根据具体需求组合使用，创建各种风格的 Ribbon 效果。组件化的实现方式使得 Ribbon 可以在项目中多处复用，只需通过 props 控制内容和样式。