CODEWITHSUNDEEP
htmlcss
TriSTaR
TriSTaR

Reputation: 403

How to remove part of a div's left border

I have a picture with a transparent background that is overlapping on top of a div.

How can I remove the part of the div's border that overlaps with the picture?

Here is what I am looking for:

Demonstration of what I am looking for

Here is what I got so far:

.task-border {
	border: 1px solid #ccc;
    padding: 10px 5px 15px 57px;
}
.task-border span {
	font-size: 1.5rem;
    font-weight: bold;
}
.task-border p {
	color: rgb(117, 112, 112);
}

.diamond:before {
    content: '';
    width: 64px;
    height: 64px;
    background: url("http://storage3.static.itmages.ru/i/16/0622/h_1466575194_5693746_71d457d34b.png") 0 0 no-repeat;
    z-index: -1;
    position: absolute;
    left: -4.7%;
    top: 10%;
}
	<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 task-border diamond">
		<span>Фирменный стиль</span>
		<p>это индивидуальность фирмы, вынесенная на обозрение.</p>
	</div>

Upvotes: 1

Views: 109

Answers (3)

Mukesh Ram
Mukesh Ram

Reputation: 6328

Add background:#fff with image url and z-index:-1 to z-index:0... It's work

.task-border {
	border: 1px solid #ccc;
    padding: 10px 5px 15px 57px;
    position: relative;
}
.task-border span {
	font-size: 1.5rem;
    font-weight: bold;
}
.task-border p {
	color: rgb(117, 112, 112);
}

.diamond:before {
    content: '';
    width: 64px;
    height: 64px;
    background: url("http://storage3.static.itmages.ru/i/16/0622/h_1466575194_5693746_71d457d34b.png") #fff 0 0 no-repeat;
    z-index: 0;
    position: absolute;
    left: -32px;
    top: 50%;
    margin-top:-32px;
}
	<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 task-border diamond">
		<span>Фирменный стиль</span>
		<p>это индивидуальность фирмы, вынесенная на обозрение. это индивидуальность фирмы, вынесенная на обозрение. это индивидуальность фирмы, вынесенная на обозрение.это индивидуальность фирмы, вынесенная на обозрение.</p>
	</div>

Upvotes: 3

Demeter Dimitri
Demeter Dimitri

Reputation: 618

It looks like indexing problem.

Just change .diamond:before css like this;

.diamond:before {
    content: '';
    width: 64px;
    height: 64px;
    background: url("http://storage3.static.itmages.ru/i/16/0622/h_1466575194_5693746_71d457d34b.png") 0 0 no-repeat;
    z-index: 1;
    position: absolute;
    left: -4.7%;
    top: 10%;
}

Upvotes: 0

Sagar Kodte
Sagar Kodte

Reputation: 3815

Edited Just added new css to .diamond:before{ background:#fff;} this is what you want?

.task-border {
	border: 1px solid #ccc;
    padding: 10px 5px 15px 57px;
 
   
}
.task-border span {
	font-size: 1.5rem;
    font-weight: bold;
}
.task-border p {
	color: rgb(117, 112, 112);
}

.diamond:before {
    content: '';
    width: 64px;
    height: 64px;
    background: url("http://storage3.static.itmages.ru/i/16/0622/h_1466575194_5693746_71d457d34b.png") 0 0 no-repeat #fff;
    z-index: 9999;
    position: absolute;
    left: -4.7%;
    top: 10%;
}
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 task-border diamond">
		<span>Фирменный стиль</span>
		<p>это индивидуальность фирмы, вынесенная на обозрение.</p>
	</div>

Upvotes: 1

Related Questions