Add ribbon style for Price (Grid)

CSS Codes Pricing Table
1

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

.es-column-container {
  overflow: visible;
}

.es-price-container {
  --d: 0.3em; /* the depth */
  font-size: 26px;
  width: calc(100% + var(--d) * 2);
  transform: translateX(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 */
}

grafik
grafik1084×759 180 KB

1 Like
2

I just realized that it no longer works with the revised widget. :neutral_face:

1 Like
6

Hi @Sina :wave:

Our devs said that this solution will work for the Grid layout only and shared the adjusted solution:

.es-column-container {
  overflow: visible;
}

.es-price-container {
  --d: 0.3em; /* the depth */
  font-size: 26px;
  width: calc(100% + var(--d) * 2);
  transform: translateX(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
7

Hi @Max,
thank you. It works fine
I added something else, then it looks like my screenshot

  bottom: 20px;
  padding: 5px;
2 Likes