Hexagon Border

I know how to give the borders of an element rounded edges, but I was wondering if there was a way to give them sharp edges in order to make a hexagon like shape.

Any help would be great!

Hello @Web_Services,

Thanks for writing in!

What you are trying to do is not possible with the current element “border radius” property. It will require custom CSS coding which is beyond the scope of our support. Perhaps this article can help you:

Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

Thank you! That putt me in the right direction!

My follow up question is that I want to create a “wrapper class” over an already existing class.
I’m trying to follow the doc here: https://css-tricks.com/using-box-shadows-and-clip-path-together/

How can I create a wrapper class in Cornerstone?

Hello @Web_Services,

You can use the DIV element and insert your wrapper class. Take the example screenshot below.

In the screenshot above, I added a DIV element which will hold the .tag-wrap class.

And the Text element is using the .tag class selector.

Hope this makes sense.

Yes that makes sense! Very helpful!

I’m also trying to change the size of the Slides within the Slider (Inline) element, but am unable to make it smaller. I want the width to stay the same but the height to be shorter.
I see on the menu where I can adjust the height for various elements, but none of them seem to work for the Slider.

I can give access to the site if need be.

Hello @Web_Services,

Can you please provide first the URL of the page where we can see the slider? You should be able to control the height in each Slide element.

Cheers.

Yes!

Hey @Web_Services,

Firstly, for succeeding questions beyond the original topic and this slider topic, please open a separate thread for each different topics. This is in order to avoid confusion which causes back and forth leading to frustration for both parties.

What you have in mind is not recommended if you’re going to shrink the image down using the options because that would be detrimental to your page speed as you’re actually loading the full image size that you don’t need. This might result in a low page speed score in Google’s Lightspeed. What’s best is you resize your image according to what you need.

If you wish to continue shrinking the image, you need to wrap the Image with a Div element. The structure would be as shown in the screenshot below.

image

If you’re wondering how to do that, hover over the Slide element and click the + icon.

image

You then drag / move the image element inside the Div.

image

Set the Slide and the Div elements’ Height to 150px for example.

image

Then, set the Image element’s height to 100% and set the Object Fit to Scale Down.

image

Those settings were tested on my site and it works as shown below.

Hope that helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.