Develop Reference

Looking for a way to make this triangle at top of div rounded like this picture? [duplicate]

Can anyone please help with this? How to achieve the attached button with CSS only(no image)?
This is my code so far:
.triangle-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #555;
}
<div class="triangle-up"></div>

Use pseudo element where you apply a radial-gradient:
.box {
margin:60px 10px 0;
display:inline-block;
color:#fff;
text-align:center;
padding:10px 30px;
background:green;
border-radius:50px;
position:relative;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:50%;
width:60px;
height:25px;
transform:translateX(-50%);
background:
radial-gradient(farthest-side at top left , transparent 98%,green 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,green 100%) right;
background-size:50.2% 100%;
background-repeat:no-repeat;
}
body {
background:pink;
}
<div class="box">text here</div>
<div class="box">more and more text here</div>
<div class="box">2 lines <br>of text</div>
Another idea in case you want any kind of coloration:
.box {
margin:60px 10px 0;
display:inline-block;
color:#fff;
text-align:center;
padding:10px 30px;
background-image:linear-gradient(60deg,yellow,purple,green,blue);
background-size:100% calc(100% + 25px);
background-position:bottom;
border-radius:50px;
position:relative;
z-index:0;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
bottom:0;
left:0;
right:0;
height:calc(100% + 25px);
background-image:inherit;
-webkit-mask:
radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
mask:
radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
-webkit-mask-size:30px 25px;
mask-size:30px 25px;
-webkit-mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
body {
background:pink;
}
<div class="box">text here</div>
<div class="box" style="
background-image:linear-gradient(160deg,white,red,black,orange);">more and more text here</div>
<div class="box" style="
background-image:linear-gradient(180deg,blue 20%,violet 20%,black);">2 lines <br>of text</div>

you can use the shadow on both rounded pseudos
.bubble {
position: relative;
background: #00aabb;
border-radius: 0.4em;
width: 200px;
height: 100px;
}
.bubble:after,
.bubble:before {
content: "";
position: absolute;
height: 3em;
width: 3em;
border-radius: 50%;
top: 100%;
margin: -1px;
}
:after {
left: 50%;
box-shadow: -0.8em -1.4em 0 -0.5em #00aabb
}
:before {
right: 50%;
box-shadow: 0.8em -1.4em 0 -0.5em #00aabb;
}
<div class='bubble'></div>
to understand how it works, give a background to the pseudo and another color to the shadows. You'll be able to reproduce for the sides or the top. It's a matter of the circle size and shadow's size and direction.

One option is to create a normal rectangle and then position two circles over it, such that they create a curved point.
In the demo below, this rectangle is represented by the .point div, and the circles are represented by the pseudo-elements ::before and ::after.
.caption {
position: relative;
width: 350px;
margin-top: 40px;
}
.caption>.content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 30px;
background-color: green;
color: white;
text-align: center;
}
.caption>.point {
position: absolute;
left: 50%;
top: -30px;
width: 30%;
height: 30px;
transform: translateX(-50%) translateZ(1px);
overflow: hidden;
background-color: green;
}
.caption>.point::before,
.caption>.point::after {
content: '';
display: block;
width: 100%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
background-color: white;
}
.caption>.point::before {
transform: translateX(-49%) translateY(-50%);
}
.caption>.point::after {
transform: translateX(49%) translateY(-50%);
}
<div class="caption">
<div class="point"></div>
<div class="content">This is some text!</div>
</div>
Here is a more visual demonstration of what the code is actually doing. The ::before and ::after elements are represented by the red circles. I've reduced the transparency of their fill to 50% so you can see which portion of the .point div they're cutting off.
.caption {
position: relative;
width: 350px;
margin-top: 40px;
}
.caption>.content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 30px;
background-color: green;
color: white;
text-align: center;
}
.caption>.point {
position: absolute;
left: 50%;
top: -30px;
width: 30%;
height: 30px;
transform: translateX(-50%) translateZ(1px);
background-color: green;
}
.caption>.point::before,
.caption>.point::after {
content: '';
display: block;
width: 100%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
background-color: rgba(255,255,255,0.5);
border: 1px solid red;
}
.caption>.point::before {
transform: translateX(-49%) translateY(-50%);
}
.caption>.point::after {
transform: translateX(49%) translateY(-50%);
}
<div class="caption">
<div class="point"></div>
<div class="content">This is some text!</div>
</div>

2X2 Overshadowing Image

I am trying to make a webpage that allows the 2x2 of image blocks, when hovered over, to overshadow the other images that are in the body.
But for some reason I cannot get the image to escape its own div box.
html, body {
height: 100%;
width: 100%;
}
div {
width: 50%;
height: 50%;
float: left;
position: relative;
transition: width 2s, height 4s;
transition-delay: 2s;
}
div:hover {
width: 100%;
height: 100%}
div:nth-of-type(1) {
background: #ccc;
}
div:nth-of-type(2) {
background: #bbb;
border-left: 1px solid #f00;
}
div:nth-of-type(3) {
background: #aaa;
border-top: 1px solid #f00;
}
div:nth-of-type(4) {
background: #ddd;
border-top: 1px solid #f00;
border-left: 1px solid #f00;
}
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

Are you looking for an effect something like this:
body {
height: 200px;
width: 400px;
}
body {
border: 1px solid black;
}
div {
display: inline-block;
width: 49%;
height: 25%;
position: relative;
transition: width 2s, height 4s;
transition-delay: 2s;
}
div:hover {
z-index: 100;
width: 100%;
height: 100%;
}
div:nth-of-type(1) {
background: #eee;
}
div:nth-of-type(2) {
background: #bbb;
}
div:nth-of-type(3) {
background: #999;
}
div:nth-of-type(4) {
background: #666;
}
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

If I understood your problem correctly, you're looking into a hover option that'll cast a shadow layer on top of everything else?
If so, there's a simple trick to that, using the transform: scale(1) and the box-shadow command.
Personally I prefer to insert all images into separate DIVs and assign a class to them.
Try this:
https://codepen.io/meta704/pen/LYpREjK

Call a function on a div with different borders

I have a div with a class called 'ball', each edge of the div has a border (border-top, border-left etc) I want to trigger different events with JavaScript when the user clicks on a border on each border.
ex: user clicks on border-top
console.log('top')
and so on
HMTL:
.ball {
border-radius: 50%;
width: 400px;
height: 400px;
margin: auto;
background-color: red;
border-top: 20px solid green;
border-left: 20px solid blue;
border-bottom: 20px solid orange;
border-right: 20px solid purple;
}
<div class="ball"></div>
I know I can trigger events when the user clicks on the div itself, but I would like to, somehow, select these borders with Javascript.

You can simulate this by adding extra elements.
Here is an exmaple (I used jQuery for simplicty but you can easily change to JS)
$('span').click(function(){
console.log($(this).data('value'));
})
.ball {
border-radius: 50%;
width: 200px;
height: 200px;
margin: auto;
background-color: blue;
position: relative;
font-size:0;
}
span:first-child {
position: absolute;
z-index: 3;
border-radius: 50%;
background: red;
top:20px;
left:20px;
bottom: 20px;
right: 20px;
}
span:nth-child(n+2) {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
border-radius: 50%;
background: green;
bottom: 0;
right: 0;
-webkit-clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
}
span:nth-child(3) {
transform:rotate(90deg);
background: purple;
}
span:nth-child(4) {
transform:rotate(180deg);
background: blue;
}
span:nth-child(5) {
transform:rotate(-90deg);
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ball">
<span data-value="center"></span>
<span data-value="bottom"></span>
<span data-value="left"></span>
<span data-value="top"></span>
<span data-value="right"></span>
</div>

How to have an inset box-shadow start from the center rather than the border?

I currently have a box shadow stemming from the border of my <img> and I'm looking for a way to have the effect inversed, where the shadow starts from the center and fills out the rest of the background.
Pen
CODE:
var medalImg = document.getElementById("benefitsImgMed");
document.getElementById("benefitsImgMed").onclick = function() {
imgClickFunction1()
};
function imgClickFunction1() {
medalImg.style.boxShadow = "0px 0px 0px 100px white inset";
setTimeout(doSomething, 1.6 /*Seconds*/ * 1000);
function doSomething() {
/*medalImg.style.borderStyle = "solid";*/
}
}
body {
background-color: black;
}
#benefitsImgMed,
#benefitsImgLig,
#benefitsImgArr,
#benefitsImgNig {
transition: 2s;
cursor: pointer;
z-index: 1;
position: absolute;
padding: 10px;
border-color: white;
border-width: 5px;
border-radius: 50%;
border-style: dashed;
}
#benefitsImgMed:hover {
box-shadow: inset 0 0 0 50px white;
}
#benefitsImgMed {
margin-left: 8%;
margin-top: 6%;
width: 13%;
height: 13%;
}
<div class="benefitImgs">
<img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9
140b7f3b7d84274/1510600813361/quality.png" id="benefitsImgMed" />
</div>

I looked over you code an changed a couple things. It seems like you may have some repetitive code by looking at them by id's. So instead I implemented a custom attribute to help us to keep track of which one was clicked. Additionally, I added an element on the inside that has very small width and height that draws a box-shadow outward. Go ahead and give it a whirl:
function doSomething() {
console.log('do something...')
}
$(".benefitImgs").click(function () {
var which = $(this).attr('data-which');
if (which === "med") {
$(this).find(".benefitImgsInner").css("box-shadow", "0px 0px 0px 55px white")
setTimeout(doSomething.bind(this),1.6*1000);
}
});
body{background-color:black;}
.benefitImgs {
width: 13%;
position: relative;
margin-left: 8%;
margin-top: 6%;
transition: 2s;
cursor:pointer;
z-index:1;
padding: 10px;
border-color: white;
border-width: 5px;
border-radius: 50%;
border-style: dashed;
}
.benefitImgsInner {
z-index:-1;
width:2px;
height:2px;
border-radius:50%;
position:absolute;
top: 50%;
left: 50%;
transition:all 2s ease-in-out;
transform: translate(-50%, -50%);
}
.benefitImgs:hover .benefitImgsInner {
transition:all 2s ease-in-out;
box-shadow: 0 0 0 50px white;
}
.benefitsImgsImg {
max-width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="benefitImgs" data-which="med">
<img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9140b7f3b7d84274/1510600813361/quality.png" class="benefitsImgsImg"/>
<div class="benefitImgsInner"></div>
</div>

Try this solution:
Note: I've dumbed it down substantially.
body{background-color:black;}
#benefitImgMed {
transition: 2s;
width: 200px;
height: 200px;
cursor:pointer;
z-index:1;
position: absolute;
border-color: white;
border-width: 5px;
border-radius: 50%;
border-style: dashed;
overflow: hidden;
}
#benefitImgMed:after{
content: "";
position: absolute;
height: 0%;
width: 0%;
background: white;
opacity: 0;
top: 50%;
left: 50%;
border-radius: 100%;
transition: all 1s;
}
#benefitImgMed:hover::after{
background: white;
height: 100%;
width: 100%;
opacity: 1;
top: 0px;
left: 0px;
}
<div id="benefitImgMed">
</div>

New divs inside pre-existing div with slanted borders

I am trying to make a header as shown in the image attached. I tried the other answers on this website too but none actually helped very much.
I already have figured out the text and logo parts but need someone to help with the slanting div borders.
The effect that I want:

Try This:
header {
border:1Px solid;
height: 200px;
position: relative;
}
header:before, header:after {
position: absolute;
width: 0;
height: 0;
content: '';
border-width: 100px;
border-style: solid;
}
header:before {
left: 0;
border-color: transparent transparent transparent #000;
}
header:after {
right: 0;
border-color:transparent #000 transparent transparent ;
}
<header></header>

Depending on what you have going on in your header, you could try using triangles to mimic the slanted borders;
header{
width: 100%;
height: 200px;
background: #2c2d2e;
}
.triangle-right {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
position: absolute;
left: 0;
border-left: 200px solid white;
}
.triangle-left {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-right: 200px solid white;
position: absolute;
right: 0;
}
<header>
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</header>