diff --git a/packages/components/badge/README.en-US.md b/packages/components/badge/README.en-US.md
index e0473ac10..c33cdc8d6 100644
--- a/packages/components/badge/README.en-US.md
+++ b/packages/components/badge/README.en-US.md
@@ -13,8 +13,8 @@ content | String | - | \- | N
 count | String / Number | 0 | \- | N
 dot | Boolean | false | \- | N
 max-count | Number | 99 | \- | N
-offset | Array | - | Typescript：`Array<string \| number>` | N
-shape | String | circle | options: circle/square/bubble/ribbon | N
+offset | Array | - | Typescript: `Array<string \| number>` | N
+shape | String | circle | options: circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left | N
 show-zero | Boolean | false | \- | N
 size | String | medium | options: medium/large | N
 
diff --git a/packages/components/badge/README.md b/packages/components/badge/README.md
index a9befb88b..e77382fcd 100644
--- a/packages/components/badge/README.md
+++ b/packages/components/badge/README.md
@@ -55,7 +55,7 @@ count | String / Number | 0 | 徽标右上角内容。可以是数字，也可
 dot | Boolean | false | 是否为红点 | N
 max-count | Number | 99 | 封顶的数字值 | N
 offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N
-shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N
+shape | String | circle | 徽标形状，其中 ribbon 和 ribbon-right 等效。可选项：circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left | N
 show-zero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
 size | String | medium | 尺寸。可选项：medium/large | N
 
diff --git a/packages/components/badge/__test__/__snapshots__/demo.test.js.snap b/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
index 27dbb501b..3eb16fa34 100644
--- a/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
+++ b/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
@@ -152,7 +152,7 @@ exports[`Badge Badge size demo works fine 1`] = `
   <wx-view
     class="demo-desc"
   >
-    Middle
+    Medium
   </wx-view>
   <wx-view
     class="block"
@@ -256,7 +256,24 @@ exports[`Badge Badge theme demo works fine 1`] = `
     title="单行标题"
   >
     <t-badge
-      count="New"
+      count="NEW"
+      offset="{{
+        Array [
+          0,
+          0,
+        ]
+      }}"
+      shape="ribbon-left"
+      slot="note"
+    />
+  </t-cell>
+  <t-cell
+    bordered="{{false}}"
+    tClass="t-class-cell"
+    title="单行标题"
+  >
+    <t-badge
+      count="NEW"
       offset="{{
         Array [
           0,
@@ -267,5 +284,44 @@ exports[`Badge Badge theme demo works fine 1`] = `
       slot="note"
     />
   </t-cell>
+  <wx-view
+    class="demo-desc"
+    style="margin-bottom: 32rpx"
+  >
+    三角角标
+  </wx-view>
+  <t-cell
+    tClass="t-class-cell"
+    title="单行标题"
+  >
+    <t-badge
+      count="NEW"
+      offset="{{
+        Array [
+          0,
+          0,
+        ]
+      }}"
+      shape="triangle-left"
+      slot="note"
+    />
+  </t-cell>
+  <t-cell
+    bordered="{{false}}"
+    tClass="t-class-cell"
+    title="单行标题"
+  >
+    <t-badge
+      count="NEW"
+      offset="{{
+        Array [
+          0,
+          0,
+        ]
+      }}"
+      shape="triangle-right"
+      slot="note"
+    />
+  </t-cell>
 </theme>
 `;
diff --git a/packages/components/badge/_example/size/index.wxml b/packages/components/badge/_example/size/index.wxml
index 753a18237..27907f629 100644
--- a/packages/components/badge/_example/size/index.wxml
+++ b/packages/components/badge/_example/size/index.wxml
@@ -4,7 +4,7 @@
   <t-avatar icon="user" size="large" badge-props="{{ {count: 8, size: 'large', offset: [7, 7]} }}" />
 </view>
 
-<view class="demo-desc">Middle</view>
+<view class="demo-desc">Medium</view>
 
 <view class="block">
   <t-avatar icon="user" badge-props="{{ {count: 8, offset: [5, 5]} }}" />
diff --git a/packages/components/badge/_example/theme/index.wxml b/packages/components/badge/_example/theme/index.wxml
index 35f442038..7a1d98d67 100644
--- a/packages/components/badge/_example/theme/index.wxml
+++ b/packages/components/badge/_example/theme/index.wxml
@@ -28,5 +28,16 @@
 
 <view class="demo-desc" style="margin-bottom: 32rpx">角标</view>
 <t-cell title="单行标题" t-class="t-class-cell">
-  <t-badge count="New" offset="{{skylineRender ? ['-16rpx', '-56rpx']: [0, 0]}}" shape="ribbon" slot="note" />
+  <t-badge count="NEW" offset="{{skylineRender ? ['-18rpx', '-32rpx']: [0, 0]}}" shape="ribbon-left" slot="note" />
+</t-cell>
+<t-cell title="单行标题" bordered="{{false}}" t-class="t-class-cell">
+  <t-badge count="NEW" offset="{{skylineRender ? ['-18rpx', '-32rpx']: [0, 0]}}" shape="ribbon" slot="note" />
+</t-cell>
+
+<view class="demo-desc" style="margin-bottom: 32rpx">三角角标</view>
+<t-cell title="单行标题" t-class="t-class-cell">
+  <t-badge count="NEW" offset="{{skylineRender ? ['-24rpx', '-32rpx']: [0, 0]}}" shape="triangle-left" slot="note" />
+</t-cell>
+<t-cell title="单行标题" bordered="{{false}}" t-class="t-class-cell">
+  <t-badge count="NEW" offset="{{skylineRender ? ['-24rpx', '-32rpx']: [0, 0]}}" shape="triangle-right" slot="note" />
 </t-cell>
diff --git a/packages/components/badge/badge.less b/packages/components/badge/badge.less
index d354057b0..b873062d1 100644
--- a/packages/components/badge/badge.less
+++ b/packages/components/badge/badge.less
@@ -49,46 +49,87 @@
     border-radius: calc(@badge-basic-height / 2);
   }
 
-  &__ribbon {
+  &__ribbon,
+  &__ribbon-right,
+  &__triangle-right,
+  &__ribbon-left,
+  &__triangle-left {
     &-outer {
       position: absolute;
       top: 0;
+    }
+  }
+
+  &__ribbon,
+  &__ribbon-right,
+  &__triangle-right {
+    &-outer {
       right: 0;
     }
   }
 
-  &--ribbon {
-    position: relative;
-    display: inline-block;
-    transform-origin: center center;
-    transform: translate(calc(50% - @badge-basic-height + 1rpx), calc(-50% + @badge-basic-height - 1rpx)) rotate(45deg);
+  &__ribbon-left,
+  &__triangle-left {
+    &-outer {
+      left: 0;
+    }
+  }
+
+  &--bubble {
+    border-radius: @border-bubble-border-radius;
+  }
+
+  &--ribbon,
+  &--ribbon-right,
+  &--ribbon-left,
+  &--triangle-left,
+  &--triangle-right {
+    width: calc(@badge-basic-height * 2);
+    height: calc(@badge-basic-height * 2);
     border-radius: 0;
-    // padding: 0;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
 
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      width: 0;
-      height: 0;
-      bottom: 0;
-      border-bottom: @badge-basic-height solid @badge-color;
-      font-size: 0;
-    }
+  &--ribbon,
+  &--ribbon-right {
+    background: linear-gradient(45deg, transparent 50%, @badge-color 50%, @badge-color 85%, transparent 85%);
+  }
 
-    &::before {
-      left: calc(-1 * @badge-basic-height + 1rpx);
-      border-left: @badge-basic-height solid transparent;
-    }
+  &--triangle-right {
+    background: linear-gradient(45deg, transparent 50%, @badge-color 50%);
+  }
+
+  &--ribbon,
+  &--ribbon-right,
+  &--triangle-right {
+    right: 0;
 
-    &::after {
-      right: calc(-1 * @badge-basic-height + 1rpx);
-      border-right: @badge-basic-height solid transparent;
+    .@{prefix}-badge__count {
+      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 1rpx));
     }
   }
 
-  &--bubble {
-    border-radius: @border-bubble-border-radius;
+  &--ribbon-left {
+    background: linear-gradient(-45deg, transparent 50%, @badge-color 50%, @badge-color 85%, transparent 85%);
+  }
+
+  &--triangle-left {
+    background: linear-gradient(-45deg, transparent 50%, @badge-color 50%);
+  }
+
+  &--ribbon-left,
+  &--triangle-left {
+    left: 0;
+
+    .@{prefix}-badge__count {
+      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 1rpx));
+    }
   }
 
   // size
@@ -103,12 +144,39 @@
     border-radius: calc(@badge-large-height / 2);
   }
 
-  &__content:not(:empty) + .t-has-count {
+  &--large&--ribbon,
+  &--large&--ribbon-right,
+  &--large&--ribbon-left,
+  &--large&--triangle-right,
+  &--large&--triangle-left {
+    width: calc(@badge-large-height * 2);
+    height: calc(@badge-large-height * 2);
+    padding: 0;
+  }
+
+  &--large&--ribbon,
+  &--large&--ribbon-right,
+  &--large&--triangle-right {
+    .@{prefix}-badge__count {
+      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 3rpx));
+    }
+  }
+
+  &--large&--ribbon-left,
+  &--large&--triangle-left {
+    .@{prefix}-badge__count {
+      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 3rpx));
+    }
+  }
+
+  &__content:not(:empty) + &--bubble.@{prefix}-has-count,
+  &__content:not(:empty) + &--circle.@{prefix}-has-count,
+  &__content:not(:empty) + &--square.@{prefix}-has-count {
     transform-origin: center center;
     transform: translate(-50%, -50%);
     position: absolute;
-    left: 100%;
     top: 0;
+    left: 100%;
   }
 
   &__content-text {
@@ -116,4 +184,10 @@
     font: @font-body-large;
     color: @badge-content-text-color;
   }
+
+  &__count {
+    &:empty {
+      display: none;
+    }
+  }
 }
diff --git a/packages/components/badge/badge.ts b/packages/components/badge/badge.ts
index 4189970ec..4c2855010 100644
--- a/packages/components/badge/badge.ts
+++ b/packages/components/badge/badge.ts
@@ -2,7 +2,7 @@ import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
 import type { TdBadgeProps } from './type';
-import { uniqueFactory } from '../common/utils';
+import { uniqueFactory, getRect } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-badge`;
@@ -26,15 +26,34 @@ export default class Badge extends SuperComponent {
     value: '',
     labelID: '',
     descriptionID: '',
+    useOuterClass: false,
   };
 
   lifetimes = {
     ready() {
       const uniqueID = getUniqueID();
+
       this.setData({
         labelID: `${uniqueID}_label`,
         descriptionID: `${uniqueID}_description`,
       });
+
+      this.checkForActualContent();
+    },
+  };
+
+  methods = {
+    checkForActualContent() {
+      const target = ['ribbon', 'ribbon-right', 'ribbon-left', 'triangle-right', 'triangle-left'];
+      if (this.properties.content || !target.includes(this.properties.shape)) {
+        this.setData({ useOuterClass: false });
+        return;
+      }
+
+      return getRect(this, `.${name}__content`).then((rect) => {
+        const hasSlotContent = rect.width > 0 || rect.height > 0;
+        this.setData({ useOuterClass: !hasSlotContent });
+      });
     },
   };
 }
diff --git a/packages/components/badge/badge.wxml b/packages/components/badge/badge.wxml
index da5e16828..ced2f25af 100644
--- a/packages/components/badge/badge.wxml
+++ b/packages/components/badge/badge.wxml
@@ -9,7 +9,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_this.getBadgeOuterClass({classPrefix, shape})}} class {{prefix}}-class"
+  class="{{classPrefix}} {{ useOuterClass? classPrefix + '__' + shape + '-outer': '' }} class {{prefix}}-class"
   aria-labelledby="{{labelID}}"
   aria-describedby="{{descriptionID}}"
   aria-role="{{ ariaRole || 'option'}}"
@@ -28,9 +28,11 @@
     aria-hidden="true"
     aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"
   >
-    <block wx:if="{{_this.isShowBadge({dot,count,showZero})}}">
-      {{ _this.getBadgeValue({dot, count, maxCount}) }}
-    </block>
-    <slot else name="count" />
+    <view class="{{classPrefix}}__count">
+      <block wx:if="{{_this.isShowBadge({dot,count,showZero})}}">
+        {{ _this.getBadgeValue({dot, count, maxCount}) }}
+      </block>
+      <slot else name="count" />
+    </view>
   </view>
 </view>
diff --git a/packages/components/badge/badge.wxs b/packages/components/badge/badge.wxs
index 369f83119..62d5c650f 100644
--- a/packages/components/badge/badge.wxs
+++ b/packages/components/badge/badge.wxs
@@ -35,12 +35,6 @@ var getBadgeStyles = function (props) {
   return styleStr;
 };
 
-var getBadgeOuterClass = function (props) {
-  var baseClass = props.classPrefix;
-  var classNames = [baseClass, props.shape === 'ribbon' ? baseClass + '__ribbon-outer' : ''];
-  return classNames.join(' ');
-};
-
 var getBadgeInnerClass = function (props) {
   var baseClass = props.classPrefix;
   var classNames = [
@@ -66,6 +60,5 @@ var isShowBadge = function (props) {
 
 module.exports.getBadgeValue = getBadgeValue;
 module.exports.getBadgeStyles = getBadgeStyles;
-module.exports.getBadgeOuterClass = getBadgeOuterClass;
 module.exports.getBadgeInnerClass = getBadgeInnerClass;
 module.exports.isShowBadge = isShowBadge;
diff --git a/packages/components/badge/props.ts b/packages/components/badge/props.ts
index bf7988856..866f17b7a 100644
--- a/packages/components/badge/props.ts
+++ b/packages/components/badge/props.ts
@@ -35,7 +35,7 @@ const props: TdBadgeProps = {
   offset: {
     type: Array,
   },
-  /** 形状 */
+  /** 徽标形状，其中 ribbon 和 ribbon-right 等效 */
   shape: {
     type: String,
     value: 'circle',
diff --git a/packages/components/badge/type.ts b/packages/components/badge/type.ts
index 92ac9cdf0..f5b307ae6 100644
--- a/packages/components/badge/type.ts
+++ b/packages/components/badge/type.ts
@@ -53,12 +53,20 @@ export interface TdBadgeProps {
     value?: Array<string | number>;
   };
   /**
-   * 形状
+   * 徽标形状，其中 ribbon 和 ribbon-right 等效
    * @default circle
    */
   shape?: {
     type: StringConstructor;
-    value?: 'circle' | 'square' | 'bubble' | 'ribbon';
+    value?:
+      | 'circle'
+      | 'square'
+      | 'bubble'
+      | 'ribbon'
+      | 'ribbon-right'
+      | 'ribbon-left'
+      | 'triangle-right'
+      | 'triangle-left';
   };
   /**
    * 当数值为 0 时，是否展示徽标
diff --git a/packages/components/common/style/theme/_font.less b/packages/components/common/style/theme/_font.less
index 3e0d0d7a1..c174909fc 100644
--- a/packages/components/common/style/theme/_font.less
+++ b/packages/components/common/style/theme/_font.less
@@ -51,32 +51,23 @@ page,
   --td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
   --td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
   --td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);
-  --td-font-mark-extraSmall: 600 var(--td-font-size-mark-extraSmall) / var(--td-line-height-mark-extraSmall)
-    var(--td-font-family);
+  --td-font-mark-extraSmall: 600 var(--td-font-size-mark-extraSmall) / var(--td-line-height-mark-extraSmall) var(--td-font-family);
   --td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);
   --td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);
   --td-font-mark-large: 600 var(--td-font-size-mark-large) / var(--td-line-height-mark-large) var(--td-font-family);
-  --td-font-body-extraSmall: var(--td-font-size-body-extraSmall) / var(--td-line-height-body-extraSmall)
-    var(--td-font-family);
+  --td-font-body-extraSmall: var(--td-font-size-body-extraSmall) / var(--td-line-height-body-extraSmall) var(--td-font-family);
   --td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);
   --td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);
   --td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);
   --td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);
-  --td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium)
-    var(--td-font-family);
+  --td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium) var(--td-font-family);
   --td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);
-  --td-font-title-extraLarge: 600 var(--td-font-size-title-extraLarge) / var(--td-line-height-title-extraLarge)
-    var(--td-font-family);
-  --td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small)
-    var(--td-font-family);
-  --td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium)
-    var(--td-font-family);
-  --td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large)
-    var(--td-font-family);
-  --td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium)
-    var(--td-font-family);
-  --td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large)
-    var(--td-font-family);
+  --td-font-title-extraLarge: 600 var(--td-font-size-title-extraLarge) / var(--td-line-height-title-extraLarge) var(--td-font-family);
+  --td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small) var(--td-font-family);
+  --td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium) var(--td-font-family);
+  --td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large) var(--td-font-family);
+  --td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium) var(--td-font-family);
+  --td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large) var(--td-font-family);
 
   // 字体大小 token
   --td-font-size: 20rpx;
diff --git a/packages/components/tabs/__test__/__snapshots__/demo.test.js.snap b/packages/components/tabs/__test__/__snapshots__/demo.test.js.snap
index 7fcde9d9c..9e8b4c6ff 100644
--- a/packages/components/tabs/__test__/__snapshots__/demo.test.js.snap
+++ b/packages/components/tabs/__test__/__snapshots__/demo.test.js.snap
@@ -273,8 +273,8 @@ exports[`Tabs Tabs with-badge demo works fine 1`] = `
         Object {
           "dot": true,
           "offset": Array [
-            "4px",
-            "4px",
+            0,
+            1,
           ],
         }
       }}"
@@ -286,8 +286,8 @@ exports[`Tabs Tabs with-badge demo works fine 1`] = `
         Object {
           "count": 8,
           "offset": Array [
-            "8px",
-            "8px",
+            0,
+            1,
           ],
         }
       }}"
diff --git a/packages/components/tabs/_example/with-badge/index.wxml b/packages/components/tabs/_example/with-badge/index.wxml
index 9132c2652..8007ae52b 100644
--- a/packages/components/tabs/_example/with-badge/index.wxml
+++ b/packages/components/tabs/_example/with-badge/index.wxml
@@ -1,5 +1,5 @@
 <t-tabs defaultValue="{{0}}">
-  <t-tab-panel label="选项" value="0" badge-props="{{ { dot: true, offset: ['4px', '4px'] } }}" />
-  <t-tab-panel label="选项" value="1" badge-props="{{ { count: 8, offset: ['8px', '8px'] } }}" />
+  <t-tab-panel label="选项" value="0" badge-props="{{ { dot: true, offset: [0, 1] } }}" />
+  <t-tab-panel label="选项" value="1" badge-props="{{ { count: 8, offset: [0, 1] } }}" />
   <t-tab-panel label="选项" value="2" />
 </t-tabs>