Add ribbon style for Price - Columns Layout

Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings:

[class*="eapps-pricing-table-column-price-wrapper"]  {
  --d: .3em; /* the depth */
  font-size: 26px;
  position: absolute;
  bottom: 20px;
  inset-inline: calc(-1*var(--d));
  border-top: var(--d) solid #0008;
  line-height: 1.8;
  clip-path: polygon(0 100%,100% 100%,100% var(--d),calc(100% - var(--d)) 0%,calc(100% - var(--d)) var(--d),var(--d) var(--d),var(--d) 0%,0 var(--d));
  background-color: #ddd; /* the main color */
}

1 Like