Question 300927 in Html Question posted in
Some basic documentation can be found here.

Html – unwanted border when using background-url

unwanted border when using background-url, I added the background-url because I needed to add triangle but couldn’t achieve that using only html and css so I created a design in figma with a while triangle and put it in html.

triangle

html:

<div class="p-dialog-header-icons ng-tns-c71-0">
<button type="button" tabindex="-1" pripple="" class="ng-tns-c71-0 p-dialog-header-icon p-dialog-header-close p-link p-ripple ng-star-inserted"><span class="p-dialog-header-close-icon pi pi-times" ng-reflect-ng-class="pi pi-times"></span></button>
</div>

css:

    .p-dialog-header-icons::before {
        width: 31px; 
        height: 31px;
        background-color: red; 
        background-image: url("/assets/triangle.svg");
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
    }
Tags:

2

Answers


  1. 0

    You can get the desired effect with a CSS gradient

    .p-dialog-header-icons {
  position: relative;
  /* optional: */
  margin: 10px;
  width: 200px;
  height: 100px;
  box-shadow: 0 0 3px #0006;
}

.p-dialog-header-icons::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 31px;
    height: 31px;
    background-image: linear-gradient(45deg, transparent 0 50%, red 50% 100%);
}
    <div class="p-dialog-header-icons ng-tns-c71-0">

</div>
    Login or Signup to reply.
  2. 0

    My first idea is this ;

    Instead of this ;

    background-color: red; 
background-image: url("/assets/triangle.svg");

    Try this;

    background: url('/assets/triangle.svg'), red;

    Secondly, I think about this ;
    Change the background position ( the red part) and size for the clean left part of image. for example;

    background-position: center, right bottom;
background-size: 30px 30px; or background-size: cover, contain;

    Find the one which is fit you;

    https://cssreference.io/property/background-size/#:~:text=background%2Dsize%3A%20contain%3B,sure%20it%20remains%20fully%20visible.&text=background%2Dsize%3A%20cover%3B,the%20element%20is%20fully%20covered.

    Last one is use all of them together ;

    background: <background-color> 
            url('/assets/triangle.svg')
            <background-position-x background-position-y>
            <background-repeat>;

background: red url('/assets/triangle.svg') center center no-repeat;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search